Question

在webpack中使用postcss-loader（带有postcss-modules）时，对于具有CSS模块哈希映射的每个.scss文件，我都会得到一个.json文件。如果我将css-loader与modules: true一起使用，则不会得到这样的映射文件。可以使用该装载机获得一个吗？

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

我需要同时将.js文件中的scss文件与正确导入的css-modules一起导入，并生成生成映射文件（.json），并将其用于php文件中。

Answer 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元素转换为在{{ 1}}。

webpack.config.js ：

.json

postcss.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'
                }

            ],
        },
    };
};

posthtml.config.js

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

css-loader，导出css模块映射

1 个答案: