详解css-loader配置

Posted 2023-05-07

参考技术A 作用

css-loader用于将css文件打包到js中, 常常配合style-loader一起使用，将css文件打包并插入到页面中。如下：

实现css类的作用域控制

默认情况下css文件中的类的作用, 第一种情况是不开启css-module模式

css-loader，导出 css 模块映射

【中文标题】css-loader，导出 css 模块映射

【英文标题】：css-loader, export css modules mapping

【发布时间】：2019-01-23 09:52:29

【问题描述】：

在 webpack 中使用 postcss-loader（带有 postcss-modules）时，我会为每个带有 css-module 哈希映射的 .scss 文件获得一个 .json 文件。如果我将 css-loader 与 modules: true 一起使用，我不会得到这样的映射文件。是否也可以使用该加载器获得一个？

问题在于，当使用 postcss-loader 时，由于某种原因，我无法在我的 .js 文件中导入 scss 文件。如果我改用 css-loader，那是可能的。

我需要在我的 .js 文件中导入 scss 文件并正确导入 css 模块，并生成我在我的 php 文件中使用的映射文件 (.json)。

【参考方案1】：

我在使用 css-loader 时遇到了同样的问题。

最后，我可以使用postcss-modules 和posthtml-css-modules 来做到这一点

首先，postcss-modules 将 .css/.scss 文件转换为 base64 中的哈希。此外，它会为每个 .css/.scss 文件创建 .json 文件，其中包含每个类名到其对应哈希名的映射。

然后，posthtml-css-modules 获取使用 .css/.scss 文件的 html 文件，并将使用以 css-modules 命名的类的 html 元素转换为在 .json 中定义的相应哈希名称。

webpack.config.js：

module.exports = function (options) 
    ...
    return 
       ...
       module: 
            rules: [
                
                    test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                    loader: '@ngtools/webpack'
                ,
                
                    test: /\.html$/,
                    use: [
                        
                            loader: 'html-loader'
                        ,
                        
                            loader: 'posthtml-loader',
                            options: 
                              config: 
                                ctx: 
                                  include: ...options,
                                  content: ...options
                                
                              
                            
                        
                    ],
                    exclude: [helpers.root('src/index.html')]
                ,
                
                    test: /\.(css|sass|scss)$/,
                    exclude: [helpers.root('src', 'styles')],
                    use: [
                        'to-string-loader',                  
                        'css-loader',
                        'postcss-loader',
                        'sass-loader'
                    ]
                ,
                
                    test: /\.(jpg|png|gif|svg)$/,
                    loader: 'file-loader',
                    options: 
                        name: 'assets/[name].[hash].[ext]',
                    
                ,
                
                    test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
                    use: 'file-loader'
                

            ],
        ,
    ;
;

postcss.config.js

module.exports = 
    plugins: [
        require('autoprefixer'),
        require("postcss-modules")(
            generateScopedName: "[hash:base64:5]"
        )
    ]

posthtml.config.js

module.exports = ( file, options, env ) => (
    plugins: [
        require('posthtml-css-modules')(file.dirname.concat('/').concat(file.basename.replace('.html','.scss.json')))
      ]  
);