Part-1-CSS
<p :class="$style.red">无敌测试-111</p>
<p class="green">无敌测试-222</p>
<p class="fill">无敌测试-333</p>
<p class="title">无敌测试-444</p>
<style module>
.red {
color: red;
}:global(.title) {color: blue;
}</style><style>.green {
color: green;
}</style>Part-2-SCSS
<p :class="s.stateHead">
kdsjfklsadjflkasfljsdjflksda</p><p :class="$style.content">
kdsjfklsadjflkasfljsdjflksda</p><p class="content1">
kdsjfklsadjflkasfljsdjflksda</p>
<style module lang="scss">
.content {
color: red;
}</style><style lang="scss">
.content1 {
color: green;
}</style>Part-3-LESS
<div :class="$style.box">
<div>bala bala bala</div><div>kdksdfjlskajfsldkaf</div><p>kdsjaflkdsjfklsadjfgsng</p></div>
<style lang="less" scoped module>
@base: #f938ab;
.box-shadow(@style, @c) {
box-shadow: @style @c;
}.box {
color: saturate(@base, 5%);
border: 1px solid lighten(@base, 30%);
// background-color: lighten(@base, 30%);
}</style>编译后如下：
效果展示：
总结说明：
构建工具会将 标明 module 化的 类名编译成一个哈希字符串，类名就变的独一无二
想模块化的1）样式内置 module 标明，例如(顺序不影响)：
<style lang="less" scoped module></style>
<style module lang="scss"></style>
<style module>
内置 module 却想全局用如下:global(.title) { color: blue;
}
2）引入文件形式import s from './a.module.scss?module'
<p :class="s.stateHead">
