NX WebPack CSS-Loader问题

Question

const { merge } = require('webpack-merge');
const sass = require('sass');

module.exports = (config, context) => {
    return merge(config, {
        module: {
            rules: [
                {
                    test: /\.sass$/i,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                modules: {
                                    localIdentName: '[local]__[hash:base64:5]'
                                }
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                implementation: sass
                            }
                        }
                    ]
                }
            ]
        }
    });
};

在其中有React Project的新鲜生成的NX工作区。 试图制作自定义的webpack.config以通过SASS文件生成哈希，

但是有很多错误掉落了。

我也尝试配置巴别尔。添加了插件babel-plugin-reactct-css模型，这无济于事

Answer 1

NX具有自己的样式加载程序，它是您合并的配置的一部分。

要解决此问题，您必须从NX Config删除该加载程序。我通过循环浏览所有module.rules并忽略我不想要的任何一个。因此，要解决您的问题，您将这样做：

module.exports = (config, context) => {
  const conf = merge(config, {
    module: {
      rules: [
        {
          test: /\.sass$/i,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: {
                  localIdentName: '[local]__[hash:base64:5]'
                }
              }
            },
            {
              loader: 'sass-loader',
              options: {
                implementation: sass
              }
            }
          ]
        }
      ]
    }
  });

  // Remove unwanted NX rules
  const mods = [];
  conf.module.rules.forEach((rule) => {
    if (rule.test != '/\\.css$|\\.scss$|\\.sass$|\\.less$|\\.styl$/') {
      mods.push(rule);
    }
  });
  conf.module.rules = mods;

  return conf;
};

这花了我很长时间来弄清楚。根据您的NX版本，您的CSS规则可能有所不同。只需console.log（rule.test）检查您要忽略的规则是什么。