webpack项目轻松混用css module的方法
时间:2019-04-20
本文章向大家介绍webpack项目轻松混用css module的方法,主要包括webpack项目轻松混用css module的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
本文讲述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进行区分
1.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进行处理。
2.单独处理node_module内的css文件
{ test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' } ], include:[path.resolve(__dirname, '..', 'node_modules')] }
三、升级版,支持css module模式和普通模式混用
1.用文件名区分两种模式
- *.global.css 普通模式
- *.css css module模式
这里统一用 global 关键词进行识别。
2.用正则表达式匹配文件
// 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]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python 技巧篇-用print打印输出但不换行方法
- gitalk 自动初始化
- 给hexo申请证书并设置https
- Python 面向对象-如何查看类的父类,外部如何获取类的名字
- Python操作excel:用xlwt设置excel单元格背景颜色,给字体加粗。【附】颜色表
- Python+selenium 自动化-获取当前页面的url地址,打开指定的url地址
- PyQt5 技术篇-窗口置顶不生效解决办法,setWindowFlags()设置不生效解决办法
- 使用hooks自动监测git仓库更改并拉取
- 重新部署hexo
- 关于前端哈希加密密码的思考
- PyQt5 技术篇-设置下拉框默认值,获取当前选择的内容
- 杜绝重复-ssh-key
- 修改hexo生成的文件链接及图片资源链接
- PyQt5 技术篇-下拉框绑定监听事件
- curl常用命令