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">
複製程式碼