这篇“css的scoped css和css module有哪些区别”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“css的scoped css和css module有哪些区别”文章吧。
一、css module
1.1.解释
为所有类名重新生成类名，有效避开了css权重和类名重复的问题。css module直接替换了类名，排除了用户设置类名影响组件样式的可能性，这样就不必为了命名绞尽脑汁。
1.2实现原理
通过给样式名加hash字符串后缀的方式，实现特定作用域语境中的样式编译后的样式在全局唯一。
1.3使用方法
在webpack.base.conf.js文件中，向 css-loader 传入 modules: true 来开启CSS Module。localIdentName 是设置生成样式的命名规则。
//webpack.base.conf.jsmodule: {
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>在vue模板中通过一个动态类绑定来使用它
<template>
<p :class="$style.red">
This should be red </p></template><template>
<p>
<p :class="{ [$style.red]: isRed }">
Am I red?
</p>
<p :class="[$style.red, $style.bold]">
Red and bold </p>
</p></template>在js中使用
<script>export default {
created () {
console.log(this.$style.red)
// -> "red_1VyoJ-uZ"
// 一个基于文件名和类名生成的标识符
}}</script>1.4使用效果
<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;}1.5注意点
在处理动画animation的关键帧keyframes，动画名称必须先写。比如，animation: deni .5s,能正常编译; animation: .5s deni, 则编译异常
记得配置css-loader，否则不会生效。
若使用的是style-loader，则需配置更换为vue-style-loader才可生效。
css modules如何解决权重问题？
允许通过重命名或命名空间来封装样式规则，减少对选择器的约束，从而达到不需要特定方法就可舒服的使用类名。
当样式规则耦合到每个组件时，当不再使用组件时，样式也会被移除。
二、Scoped
2.1实现原理
vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。无法完全避开css权重和类名重复的问题。
2.2使用方法
在 < style >标签添加 scoped属性
2.3使用效果
<style scoped>h2 {
color: #f00;}</style>编译后结果：
h2[data-v-4c3b6c1c] {
color: #f00;}2.4缺点
如果用户在别处定义了相同的类名，也许还是会影响到组件的样式。
根据css样式优先级的特性，scoped这种处理会造成每个样式的权重加重,引用 使用了scoped的组件
作为子组件，修改子组件的样式变得很难，可能迫不得已只能用！importantscoped会使 标签选择器 渲染变慢很多倍，用标签选择器时scoped会严重降低性能，而使用class或id则不会
以上就是关于“css的scoped css和css module有哪些区别”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
