节点模块的 CSS

Posted 2023-03-07

【中文标题】节点模块的 CSS

【英文标题】：Css of node-modules

【发布时间】：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都不起作用？或者你不能覆盖它们？

这不应该发生，因为您从节点模块导入样式，例如：导入“路径”而不将它们分配给任何对象。

【参考方案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,
                    ,
                
            ],
        ],
    ,
  ;