css-loader,导出 css 模块映射
Posted
技术标签:
【中文标题】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')))
]
);
【讨论】:
以上是关于css-loader,导出 css 模块映射的主要内容,如果未能解决你的问题,请参考以下文章
gulp + webpack + css-loader + typescript:“找不到模块”
Webpack:在 sass-loader、css-loader 上重复导入(模块:true)
在 css-loader 之后使用 postcss-loader