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

更新时间：2021年01月07日 09:51:46 作者：李牧敲代码

这篇文章主要介绍了如何在vue-cli中使用css-loader实现css module，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下

【前言】

无论是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父组件向子组件传值
本文通过实例代码给大家详细分享了Vue父组件向子组件传值的过程以及关键点讲解，一起学习参考下吧。
2018-02-02
基于Vue实现tab栏切换内容不断实时刷新数据功能
在项目开发中遇到这样需求，就是有几个tab栏，每个tab栏对应的ajax请求不一样，内容区域一样，内容为实时刷新数据，实现方法其实很简单的，下面小编给大家带来了基于Vue实现tab栏切换内容不断实时刷新数据功能，需要的朋友参考下吧
2017-04-04
Vue3从0搭建Monorepo项目组件库
这篇文章主要为大家介绍了Vue3从0搭建Monorepo项目组件库示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
使用vue-video-player实现直播的方式
在开发期间使用过video.js、mui-player等插件，发现这些video插件对移动端的兼容性都不友好，最后发现一个在移动端兼容不错的插件vue-video-player，下面通过场景分析给大家介绍使用vue-video-player实现直播的方法，感兴趣的朋友一起看看吧
2022-01-01
vue3.0中的watch侦听器实例详解
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器,这就是为什么Vue通过watch选项提供了一个更通用的方法,来响应数据的变化,这篇文章主要给大家介绍了关于vue3.0中watch侦听器的相关资料,需要的朋友可以参考下
2021-10-10
详解vue中axios请求的封装
这篇文章主要介绍了vue中axios请求的封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue 表单验证按钮事件交由父组件触发的方法
这篇文章主要介绍了vue 表单验证按钮事件交由父组件触发的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
Vue的MVVM实现方法
本篇文章主要主要介绍了Vue的MVVM实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
vue3响应式API之ref的使用
这篇文章主要介绍了vue3响应式API之ref的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
解决vue3项目打包后部署后某些静态资源图片不加载问题
这篇文章主要给大家介绍了如何解决vue3项目打包后部署后某些静态资源图片不加载问题,文中通过图文结合的方式讲解的非常详细,有需要的朋友可以参考下
2024-05-05