如何在vue-cli中使用css-loader实现css module


Posted in Vue.js onJanuary 07, 2021

【前言】

无论是vue还是react的css模块化解决方案都是依赖loader来实现的 在使用上,vue中用scoped属性实现样式的私有化,利用深度作用选择器/deep来实现样式的去私有化。

例子:

<div>
  <div class="demo">
    <div class="child"></
    div>
  </div>
</div>
<script>
// some code
<script/>
<style lang="less" scoped>
 .demo {
  height: 100px;
  padding-top: 20px;
  background-color: grey;
  /deep/.child {
   color: red;
  }
 }
</style>

在react中使用上是这么搞的(基于css-loader):

//test.less
.demo {
  height: 100px;
  padding-top: 20px;
  background-color: grey;
  :global(.child) {
    color: red
  }
}
import styles from './test.less'

// some code

<div className={styles.demo}>
  <div class="child"></div>
</div>

不得不说,在使用上还是vue比较方便。

如果硬要在vue中使用css-loader实现css module的这套解决方案呢?这里以vue-clie 3.x为例。

无论在vue的脚手架vue-cli中还是在react的脚手架umi中,,现在都使用了webpack-chain来实现配置webpack.

这里在vue-cli脚手架创建的项目根目录下,新建vue.config.js,并写入如下内容:

module.exports = {
 chainWebpack: (config) => {
  config.devServer
   .proxy({
    '/api': {
     target: 'http://localhost:3000',
     pathRewrite: { '^/api': '', },
    },
   })
   .port(9000);

  config.module
  .rule('less')
  .oneOf('normal-modules')
  .test(/.less$/)
  .use('css-loader')
  .tap(options => {
   return Object.assign(options, {
    modules: {
     localIdentName: '[name]__[local]___[hash:base64:5]',
     auto: /\.less$/i,
    },
   })
  });

 },
};

本来其实也不用写这段内容,默认情况,vue-cli的脚手架已经配置了css-loader的模块化,但是需要把less文件命名成xxx.module.less的形式,这和umi那套不同,也不方便,这样配置然后重启,就能像react一样写css了,另外把引入的style存入data中。这里只是说下可以在vue-cli使用css-loader的那套解决方案,但最佳实践还是用vue自带的那套。

以上就是如何在vue-cli中使用css-loader实现css module的详细内容,更多关于vue-cli中使用css-loader实现css module的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 #Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 #Vue.js
详解Vue2的diff算法
Jan 06 #Vue.js
vuex的使用步骤
Jan 06 #Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 #Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 #Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 #Vue.js
You might like
php preg_replace替换实例讲解
2013/11/04 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
WAF的正确bypass
2017/01/05 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Python list与NumPy array 区分详解
2019/11/06 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
python十进制转二进制的详解
2020/02/07 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
心得体会怎么写
2013/12/30 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
消防应急演练方案
2014/02/12 职场文书
优秀教师工作感言
2014/02/16 职场文书
学校招生宣传广告词
2014/03/19 职场文书
刑事申诉状范文
2015/05/20 职场文书
学生会干部任命书
2015/09/21 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
聊聊Python String型列表求最值的问题
2022/01/18 Python