节点模块的 CSS

Posted

技术标签:

【中文标题】节点模块的 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,
                    ,
                
            ],
        ],
    ,
  ;

【讨论】:

以上是关于节点模块的 CSS的主要内容,如果未能解决你的问题,请参考以下文章

从节点模块直接导入的 CSS 文件奇怪地丢失了

使用 webpack 从节点模块加载 CSS 文件

Webpack:如何包含节点模块的 css?

从 Next JS 中的节点模块导入 css 文件?

未加载 VueJs 组件节点模块 css/js

从 Nuxt.js 与 PhpStorm 中的节点模块解析 SCSS 中的 @import .css