Vue中CSS模块化最佳实践

时间:2021-05-28 12:26:44

Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试。

Vue Loader Scope CSSVue Loader CSS Modules两节中介绍了Vue实现CSS模块化的两种方式。

下面对scoped和CSS Modules两种方式分别进行介绍,然而这两种方式均非最佳实践。

一、scoped

使用scoped会为组件中HTML树的每个元素都添加data-xxxx属性,其中xxxx是哈希值。转换之后的CSS变成

mySelector[data-xxxx]{
....
}

scoped的缺点是很多的:

  • 低效。scoped实现方式是为每个元素添加data-xxxx属性,这会造成CSS选择器变得复杂,造成DOM树冗余,不利于浏览器快速渲染。

二、使用CSS Modules

使用scoped比较简单,使用modules需要改三个地方。

(1)在webpack中开启CSS的modules选项

最简单的配置如下所示:

// webpack.config.js
{
module: {
rules: [
// ... 其它规则省略
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
// 开启 CSS Modules
modules: true,
// 自定义生成的类名
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
}
}

但是,以上这个配置是有问题的:它对全部css都应用modules,而我们只想在vue组件中使用modules。当使用Element时,引用Element自带的CSS之后会发现不生效。这时,应该采用如下配置:

// webpack.config.js -> module.rules
{
test: /\.css$/,
oneOf: [
// 这里匹配 `<style module>`
{
resourceQuery: /module/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]_[hash:base64:5]'
}
}
]
},
// 这里匹配普通的 `<style>` 或 `<style scoped>`
{
use: [
'vue-style-loader',
'css-loader'
]
}
]
}

(2)在Vue组件中的template部分

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

(3)在Vue组件中的style部分

<style module>
.red {
color: red;
}
.bold {
font-weight: bold;
}
</style>

CSS Modules总结

我们的目的是让组件内部的CSS样式不污染全局。

Vue中CSS Module的写法缺点太多,令人难以忍受:

  • 写起来复杂,每个class都需要带上$style,实际上这个过程可以自定义函数来实现,完全不需要使用CSS Modules
  • 可读性差,代码长度变长,$style使得代码冗余很多

三、最佳实践

最佳实践包括三方面:

  • 使用less
  • 组件的根元素设置为一个特殊的class
  • style块中的内容形如
.someComponent{
...
}

这种方式写起来简洁,实现也简单,是一种非常完美的写法。