前面的话
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 命名上做文章
2CSS 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
- }
- }
- }
- ]
- }
来源: https://www.cnblogs.com/xiaohuochai/p/8537959.html