一、css module
模块化原理
为所有类名重新生成类名，有效避开了css权重和类名重复的问题。css module直接替换了类名，排除了用户设置类名影响组件样式的可能性。
<template>
<p :class="$style.gray">
Im gray
</p>
</template>
<style module>
.gray {
color: gray;
}
</style>
//编译结果
<p class="gray_3FI3s6uz">Im gray</p>
.gray_3FI3s6uz {
color: gray;
}
使用步骤
- 向
css-loader传入modules: true来开启CSS Module
module: {
rules: [
// ... 其它规则省略
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
// 开启 CSS Modules
modules: true,
// 自定义生成的类名
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
}
- 在
<style>上添加module特性
<style module>
.red {
color: red;
}
.bold {
font-weight: bold;
}
</style>
- 模板中通过一个动态类绑定来使用它
<template>
<p :class="$style.red">
This should be red
</p>
</template>
<template>
<div>
<p :class="{ [$style.red]: isRed }">
Am I red?
</p>
<p :class="[$style.red, $style.bold]">
Red and bold
</p>
</div>
</template>
- 在js中使用
<script>
export default {
created () {
console.log(this.$style.red)
// -> "red_1VyoJ-uZ"
// 一个基于文件名和类名生成的标识符
}
}
</script>
特殊情况
- 只想在某些 Vue 组件中使用 CSS Modules，你可以使用
oneOf规则并在resourceQuery字符串中检查module字符串：
{
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'
]
}
]
}
- CSS Modules 可以与其它预处理器一起使用：
// webpack.config.js -> module.rules
{
test: /\.scss$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: { modules: true }
},
'sass-loader'
]
}
- 在
.vue中你可以定义不止一个<style>，为了避免被覆盖，你可以通过设置module属性来为它们定义注入后计算属性的名称。
<style module="a">
/* 注入标识符 a */
</style>
<style module="b">
/* 注入标识符 b */
</style>
二、scoped
模块化原理：
为类名添加一个hash标识属性。无法完全避开css权重和类名重复的问题。
<style scoped>
h1 {
color: #f00;
}
</style>
//编译结果如下
h1[data-v-4c3b6c1c] {
color: #f00;
}
缺点
如果用户在别处定义了相同的类名，也许还是会影响到组件的样式。
根据css样式优先级的特性，scoped这种处理会造成每个样式的权重加重,引用 使用了scoped的组件 作为子组件，修改子组件的样式变得很难，可能迫不得已只能用！important
scoped会使 标签选择器 渲染变慢很多倍，用标签选择器时scoped会严重降低性能，而使用class或id则不会
