nxwebpack css-loader essue

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
                            }
                        }
                    ]
                }
            ]
        }
    });
};

Freshly生成的NX Workspace带有React Project。 尝试制作自定义的webpack.config以通过sass文件生成哈希

但是有很多错误掉了。 我也尝试配置Babel。添加了插件babel-plugin-reactct-css模型，这无济于事。

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

要解决此问题，您必须从NX Config删除该加载程序。我通过循环浏览所有

module.rules

Answer 1

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规则可能有所不同。只是检查您要忽略的规则是什么。