在 webpack 中使用 postcss-loader (带有 postcss-modules)时,我会为每个带有 css-module HashMap 的 .scss 文件获得一个 .json 文件。如果我将 css-loader 与 modules: true
一起使用,我不会得到这样的映射文件。是否也可以使用该加载程序获得一个?
问题确实是,当使用 postcss-loader 时,由于某种原因,我无法在 .js 文件中导入 scss 文件。如果我使用 css-loader 代替,这是可能的。
我需要在正确导入 css 模块的 .js 文件中导入 scss 文件,并生成映射文件 (.json),我在 php 文件中使用该文件。
最佳答案
我在使用 css-loader
时遇到了同样的问题。
最后,我可以使用postcss-modules来做到这一点和 posthtml-css-modules
首先,postcss-modules
将 .css/.scss 文件转换为 Base64 的哈希值。此外,它还会为每个 .css/.scss 文件创建 .json
文件,其中包含每个类名称到相应哈希名称的映射。
然后,posthtml-css-modules
获取使用 .css/.scss 文件的 html 文件,并转换使用以 css-modules
命名的类的 html 元素code> 到 .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')))
]
});
关于webpack - css-loader,导出css模块映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51877008/