摘要：前言前言本文讲述开启模块功能之后，如何与引用的包中样式文件不产生冲突。在不做特殊处理的前提下，样式文件将会被转译成。
本文讲述css-loader开启css模块功能之后，如何与引用的npm包中样式文件不产生冲突。
比如antd-mobilenpm包的引入。在不做特殊处理的前提下，样式文件将会被转译成css module。
{
test: /.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
localIdentName: "[hash:base64:6]"
}
},
"postcss-loader"
]
}以上代码片段，摘自webpack配置的module.rule。
可以看出wepack在编译过程中，遇到.css结尾的文件，都会交由postcss-loader、css-loader和style-loader依次处理。
因为css-loader开启了css模块功能，所以，所有经过处理的css文件，类名都将被改变。
使用
exclude和include进行区分
node_module文件夹内的文件，避免被当前rule处理{
test: /.css$/,
use: [
{
loader: "style-loader"
}，
{
loader: "css-loader",
options: {
modules: true,
localIdentName: "[hash:base64:6]"
}
},
{
loader: "postcss-loader"
}
],
exclude:[path.resolve(__dirname, "..", "node_modules")]
}如上所示，将node_module文件夹内的文件，用exclude排除在外，不用当前rule进行处理。
node_module内的css文件{
test: /.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "postcss-loader"
}
],
include:[path.resolve(__dirname, "..", "node_modules")]
}css module模式和普通模式混用普通模式css module模式这里统一用 global 关键词进行识别。
// css module
{
test: new RegExp(`^(?!.*.global).*.css`),
use: [
{
loader: "style-loader"
}，
{
loader: "css-loader",
options: {
modules: true,
localIdentName: "[hash:base64:6]"
}
},
{
loader: "postcss-loader"
}
],
exclude:[path.resolve(__dirname, "..", "node_modules")]
}
// 普通模式
{
test: new RegExp(`^(.*.global).*.css`),
use: [
{
loader: "style-loader"
}，
{
loader: "css-loader",
},
{
loader: "postcss-loader"
}
],
exclude:[path.resolve(__dirname, "..", "node_modules")]
}less在使用css module时，对url的解析存在冲突，可以用resolve-url-loader进行解决，直接上代码：
test: /.less/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
sourceMap: true,
importLoaders: 2
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true
}
},
{
loader: "resolve-url-loader",
options: {
sourceMap: true
}
},
{
loader: "less-loader",
options: {
sourceMap: true
}
}
]
[1] Updated README regarding relative filepaths issue #121
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/2146.html
摘要：也可以和预处理器混用目前看下来，它只对名做哈希，也就是说然而这个算是一个有意思的方式，首先它依赖于，而并不局限于的开发，任何前端项目都可以使用，那么就也都可以使用的概念，不知道这个会有怎么样的发展，感觉可以尝试。 React的组件式开发，让我们可以利用其Component Model，专注于单个组件的逻辑开发，其中还包括组织组件的样式。先声明，本文并不是webpack配置教程，不会介绍...
摘要：名称后自动自动补全的功能将被移除在配置时，官方不再允许省略扩展名，的配置写法上将逐步趋于严谨。使用自定义参数作为配置项传入方式将做调整如果你随意将自定义参数通过传入到配置项中，如你会发现这将不会被允许，的执行将会遵循更为严格的标准。 历时多日，webpack2.2正式版终于赶在年前发布了，此次更新相对于1.X版本有了诸多的升级优化改进，笔者也在第一时间查阅了官方的文档，整理和翻译了由w...
摘要：名称后自动自动补全的功能将被移除在配置时，官方不再允许省略扩展名，的配置写法上将逐步趋于严谨。使用自定义参数作为配置项传入方式将做调整如果你随意将自定义参数通过传入到配置项中，如你会发现这将不会被允许，的执行将会遵循更为严格的标准。 从 webpack v1 迁移到 webpack v2 新特性 欢迎小伙伴们为 前端导航平台 点star github仓库： https://githu...
摘要：以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。强大的设计使得它更像是一个构建平台，而不只是一个打包工具。 以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。 如今，网页不再...
阅读 3277·2023-04-26 00:57
阅读 599·2021-10-08 10:05
阅读 1345·2021-09-08 09:36
阅读 4146·2021-08-12 13:31
阅读 2541·2019-08-30 15:55
阅读 2236·2019-08-30 15:55
阅读 1012·2019-08-30 15:55
阅读 2682·2019-08-29 13:17
