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

【前言】

无论是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的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue打包部署到Nginx时,css样式不生效的解决方式

    今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地 使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后,通过访问是无法加载出来样式的. 于是乎,在网上开始寻找资料,发现大部分前辈的解决方案都是在,config的文件夹中的index.js assetsRoot: path.resolve(__dirname, '../

  • 解决vue scoped scss 无效的问题

    今天遇到scoped内部的scss设置无效,解决办法如下: /deep/ <style scoped lang="scss"> .position-el-steps { /deep/ .el-step.is-vertical { .el-step__description { margin-top: -20px; } .el-step__line { border-left: 2px dashed #c0c4cc; background-color: transparent

  • vue3.0中使用postcss-pxtorem的具体方法

    postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位. 前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用. 1.安装依赖 npm install postcss-pxtorem -D 2.设置规则(更改postcss.config.js,该文件为使用vue-cli3自动创建的文件) module.

  • 在vue中动态修改css其中一个属性值操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <!--此div的高度取屏幕可视区域的高度--> <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div> </template> <script> export default { data() { r

  • Vue中rem与postcss-pxtorem的应用详解

    rem 布局 rem是根元素(html)中的font-size值. rem布局不多赘述,有很多详细说明rem布局原理的资料. 简单的说,通过JS获取设备宽度动态设定rem值,以实现在不同宽度的页面中使用rem作为单位的元素自适应的效果. 新建rem.js文件,于main.js中引用 // 设计稿以1920px为宽度,而我把页面宽度设计为10rem的情况下 const baseSize = 192; // 这个是设计稿中1rem的大小. function setRem() { // 实际设备页面宽

  • Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码第1/3页

    类似于浏览器窗口一样的路由切换逻辑,看着还是挺高大上的,本以为有很多高级的玩意儿,奈何复杂的东西总是由简单的东西拼接而成的,这个功能也不例外. 本篇文章主要描述两个问题: 如何实现这种Tab标签页的路由效果 如何为路由切换添加转场动画. 该功能的开发主要使用到 AntDesignVue 组件库的Tab组件和 Animate.css 效果如下: Tab标签页实现 首先是该组件的模板部分, ContextMenu 组件是我们自定义的右键菜单,后面会说到. a-tabs 组件则是 ant 的组件,具体

  • vue-cli设置css不生效的解决方法

    vue-cli设置css不生效的解决方法

    我们有的项目使用的是老的vue-cli脚手架生成的,今天想写点东西,发现.vue文件里面 style 里面写的样式都不生效了,很自然就想到是不是loader的问题. 在这种项目的webpack.base.config.js一般设置loader的 rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConf

  • vue中配置scss全局变量的步骤

    vue中配置scss全局变量的步骤

    在写项目的过程中,如果用的是scss来编写样式代码,常常需要定义各种变量,例如主题色.主字号之类的,因此我们会把这些变量写到一个单独的_variable.scss文件内,但是每次都要在vue单文件内引入这些变量未免太繁琐了,所以有没有办法可以默认把变量文件作为全局文件进行引入呢?答案是肯定的,可以用下面的方法进行配置,可以根据当前使用的框架和环境来进行方法的选择. 一.使用vue-cli(即vue-cli2)脚手架时 1. 首先,需要安装一个loader,sass-resources-loade

  • Vue3新特性之在Composition API中使用CSS Modules

    在 Vue 3 Composition API 最近的一次 beta 升级中,无论是 Vue 3 本 3 库 vue-next,还是面向 Vue 2 过渡用的 @vue/composition-api 库中,都同步更新了一个 useCSSModule 函数 -- 用来在使用了 Composition API 的 Vue 实例中,支持 CSS Modules 语法. 首先来看看什么是 CSS Modules: CSS Modules CSS Modules 是一种 CSS 的模块化和组合系统.vu

  • Vue + Scss 动态切换主题颜色实现换肤的示例代码

    根据预设的配色方案,在前端实现动态切换系统主题颜色. 大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量.这里可以选择持久化Vux或接口来保存用户选择的主题. 一.首先需要给项目下载配置Scss 1.安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { t

  • vue css 引入asstes中的图片无法显示的四种解决方法

    这里主要针对的是vuecli2中的一些问题. vue项目中,常常会有很多的图片资源,这样的资源存放位置,通常我们有两个选择:1. static,2. assets 关于这两者之间的区别,和如何选择这里就不多说了! 这里我们来说说assets目录下存放图片时,在vue组件的css样式中引入图片时将会遇到的一些问题! 正常情况,我们在本地开发调试的时候,无论什么样的方式引入图片都不会有问题.但是,一大包发布打线上,就会出现图片无法加载的情况! 这是因为,出于某些原因,有人修改了config目录下的i

随机推荐