如何在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自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python Socket编程入门教程
2014/07/11 Python
python实现简单的TCP代理服务器
2014/10/08 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
Python sep参数使用方法详解
2020/02/12 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
如何利用Python 进行边缘检测
2020/10/14 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
个人政风行风自查自纠报告
2014/10/21 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
工作证明书
2015/06/15 职场文书
2016年元旦主持词
2015/07/06 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python