在vue中使用css modules替代scroped的方法

前面的话

css modules是一种流行的模块化和组合css的系统。 vue-loader提供了与css modules的集成，作为scope css的替代方案。本文将详细介绍css modules

引入

最开始使用vue的时候，提倡并大量使用的是scoped这种技术

<style scoped>
 @media (min-width: 250px) {
  .list-container:hover {
   background: orange;
  }
 }
</style>

这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 css 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover

但是，它并不能完全避免冲突

<span data-v-0467f817 class="errshow">用户名不得为空</span>

以上面的代码为例，使用scoped之后，它在元素上添加了一个唯一的属性'data-v-0467f817'，css样式被编译如下

.errshow[data-v-0467f817] {
  font-size: 12px;
  color: red;
}

但是，如果用户也定义了一个errshow类名，会影响到所有定义为errshow类名的组件的显示

而css modules则做的更彻底，它不是添加属性，而是直接改变类名

<span class="_3ylglhi_7askyw5blolyiv_0">用户名不得为空</span>

这样，大大降低了冲突的可能性，只要不是用户直接给span标签设置样式，基本上不会影响组件的显示

模块化

css modules既不是官方标准，也不是浏览器的特性，而是在构建步骤中对css类名选择器限定作用域的一种方式（通过hash实现类似于命名空间的方法）。类名是动态生成的，唯一的，并准确对应到源文件中的各个类的样式

实际上，css modules只是css模块化的一种方式。为什么我们需要css模块化呢？

css的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。于是，亟待解决的就是样式冲突（污染）的问题。一般地，为了解决冲突，会把class命名写长一点，降低冲突几率；加上父元素的选择器，来限制范围等

css模块化就是来解决这个问题的，一般地，分为三类

1、命名约定类

该类css模块化方案主要用来规范css命名，最常见的是bem，当然还有oocss等，在构建工具出现之前，大多数都是在css命名上做文章

2、css in js

彻底抛弃css，用javascript来写css规则，常见的有styled-components

3、使用js来管理样式

使用js编译原生的css文件，使其具备模块化的能力，最常见的就是css modules

随着构建工具的兴起，越来越多的人开始使用后两者方案，书写css时，不用再特意地关心样式冲突问题。只需要使用约定的格式编写代码即可

写法

下面来介绍css modules的写法

在style标签中添加module属性，表示打开css-loader的模块模式

<style module>
.red {color: red;}</style>

在模板中使用动态类绑定:class，并在类名前面加上'$style.'

<template>
 <p :class="$style.red">
  this should be red
 </p>
</template>

如果类名包含中划线，则使用中括号语法

<h4 :class="$style['header-tit']">类别推荐</h4>

也可以使用数组或对象语法

  <p :class="{ [$style.red]: isred }">
   am i red?
  </p>
  <p :class="[$style.red, $style.bold]">
   red and bold
  </p>

更复杂的对象语法

  <ul 
　　　 :class="{
    [$style.panelbox]:true,
    [$style.transitionbypanelbox]:needtransition
   }"

更复杂的数组语法

  <li
   :class="[
    $style['aside-item'],
    {[$style['aside-item_active']]:(i === index)}
   ]"

配置

css-loader关于css modules的默认配置如下

{
 modules: true,
 importloaders: 1,
 localidentname: '[hash:base64]'
}

可以使用vue-loader的cssmodules选项为css-loader进行自定义的配置

module: {
 rules: [
  {
   test: '\.vue$',
   loader: 'vue-loader',
   options: {
    cssmodules: {
     localidentname: '[path][name]---[local]---[hash:base64:5]',
     camelcase: true
    }
   }
  }
 ]
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。