节点模块的 CSS答案

【问题标题】：Css of node-modules节点模块的 CSS
【发布时间】：2019-12-19 14:57:16
【问题描述】：

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

我还尝试使用 import 'path' 导入节点模块的 css；但它没有工作。

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

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

【问题讨论】：

从节点模块导入的所有css都不起作用？或者你不能覆盖它们？
这不应该发生，因为您从节点模块导入样式，例如：导入“路径”而不将它们分配给任何对象。

标签： css webpack node-modules css-loader

【解决方案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,
                    },
                }
            ],
        }],
    },
  };

【讨论】：