1

我正在将 Tailwind 添加到一个 Angular 项目中，我之前在新设置上已经做过，没有问题。这里的不同之处在于我将我们旧的基于引导程序的主题添加到这个项目和 Tailwind。我们的想法是，我们将在未来几个月内慢慢迁移到 Tailwind。

当我单独添加 Tailwind 时，我对以下tailwind.config.js文件和附加webpack.config.js文件没有任何问题：

// tailwind.config.js
module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
    // defaultLineHeights: true,
    // standardFontWeights: true
  },
  purge: ['./apps/**/src/**/*.html', './apps/**/**/*.ts', './libs/**/*.html', './libs/**/*.ts'],
  theme: {
    extend: {
      fontSize: {
        xxs: '0.625rem',
      },
      colors: {
        'brand-color': 'var(--brand_color)',
        'motiv-blue': {
          lighter: '#8AC6F5',
          default: '#0094cd',
        },
      },
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/ui')],
};

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            ident: "postcss",
            syntax: "postcss-scss",
            plugins: [
              require("postcss-import"),
              require("tailwindcss"),
              require("autoprefixer"),
            ],
          },
        },
      },
    ],
  },
};

所以这些配置文件非常适合新项目。但是，当尝试在单独的主题之上添加 Tailwind 时，这不起作用。我将主题styles.scss文件添加到angular.json该项目的配置中：

"styles": ["libs/theme/scss/styles.scss", "apps/hsa-portal/src/styles.scss"]

然后服务于项目，却得到如下错误：

Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Failed to find 'libs/theme/scss/brand-colors'
  in [
    /path/to/component
  ]

我尝试将以下exclude数组（也只是一个项目）添加到文件中的postcss-loader配置中webpack.config.js，但它没有解决任何问题：

exclude: [
  /libs\/theme\/scss/,
  /libs\/theme\/scss\/brand-colors/,
  /libs\/theme\/scss\/variables/,
  /bootstrap/,
],

必须有一种方法可以告诉postcss-loader从哪里导入这些文件以便它按预期工作，或者忽略这些路径并让它们不理会。这就是我正在寻找的，但我对 Webpack 或 PostCSS Loader 不是很有经验。

编辑

webpack.config.js稍微更改文件，如下所示：

{
  test: /\.scss$/,
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      ident: 'postcss',
      syntax: 'postcss-scss',
      plugins: (loader) => [
        require('postcss-import')({ root: loader.resourcePath }),
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
},

再次构建项目，但 Tailwind 样式已经消失。基本上我所做的只是使plugins属性成为返回数组的函数，并为 postcss-import 配置设置根路径。

4

0 回答 0