如何在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使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue中data里面的数据相互使用方式
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
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
js静态作用域的功能。
2006/12/25 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
Python中的自省(反射)详解
2015/06/02 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Python正则表达式指南 推荐
2018/10/09 Python
Python补齐字符串长度的实例
2018/11/15 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
python生成特定分布数的实例
2019/12/05 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
Noon埃及:埃及在线购物
2019/11/26 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
英语专业求职信
2014/07/08 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python