Css 个节点模块

Question

我在我的 React 应用程序中使用 css 模块。在 webpack.config.js 中设置 modules:true 后，我可以从我在 src 文件夹中创建的文件中获取 css。我正在从节点模块导入一些组件。但是节点模块中存在的 css 组件没有得到应用。

我还尝试使用 import 'path' 导入 css 个节点模块；但是没用。

如果我设置 modules:false，将应用 css 个节点模块，而不会应用 css 个 src 文件夹中的文件。

webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          }
        ],
      },
    ],
  },
};

Answer 1

这可能是因为您使用的节点模块可能不遵循模块语法。我的意思是他们可能会直接用字符串设置类，而不是像 style.someClassName 那样使用。因此，您的规则中需要 2 个条目，1 个用于您的内容，1 个用于节点模块。

例如：

module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            exclude: /node_modules/,
            use: [{
                    loader: "style-loader"
                },
                {
                    loader: "css-loader",
                    options: {
                        modules: true,
                    },
                }
            ],
        }, {
            test: /\.css$/,
            include: /node_modules/,
            use: [{
                    loader: "style-loader"
                },
                {
                    loader: "css-loader",
                    options: {
                        modules: false,
                    },
                }
            ],
        }],
    },
  };

Css 个节点模块

Css of node-modules

css

webpack

node-modules

css-loader