CSS 加载器，导出 CSS 模块映射

Question

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

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

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

Answer 1

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

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

首先，postcss-modulesbase64 中将 .css/.scss 文件转换为哈希。此外，它还为每个 .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')))
]  
});