如何在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+iview分页组件的封装
Nov 17 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
VUE递归树形实现多级列表
Jul 15 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不用正则采集速度探究总结
2008/03/24 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
PHP 上传文件大小限制
2009/07/05 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php表单提交实例讲解
2015/11/12 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
php中this关键字用法分析
2016/12/07 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
javascript instanceof 内部机制探析
2010/10/15 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python模拟enum枚举类型的方法小结
2015/04/30 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
Numpy 多维数据数组的实现
2020/06/18 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
高二化学教学反思
2014/01/30 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
实习单位意见
2015/06/04 职场文书
学风建设主题班会
2015/08/17 职场文书
五一放假通知怎么写
2015/08/18 职场文书
比较node.js和Deno
2021/04/27 Javascript
Django如何创作一个简单的最小程序
2021/05/12 Python
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
ant design charts 获取后端接口数据展示
2022/05/25 Javascript