Css-modules作用:

　　簡介: 用人話說, 類似於將原類名 .bs 自動生成為 .btn-bs-3uUDV

　　優點: 因為是哈希運算, 所以每次引用都會自動生成一個新的哈希, 多人開發時候不會類名沖突, 不用打前綴

　　此文配置依賴構建工具: webpack 4x

step1

　　webpack.config.js中 配置scss-loader

　　　　　　　// sass-loader
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    
 
‘css-loader?modules&localIdentName=[name]-[local]-[hash:base64:5]‘, // ← Here 
                    ‘postcss-loader‘,
                    "sass-loader"
                ]
            },

step2

　　編輯測試 .scss && .html && .js 文件

　　file: index.html

<div class="test">cssModules-test</
 
div>

　　file: index.scss

.base{
   background: #000;
 }
.test{
  // 組合進通用base類
  composes:classTest;
  
  // special 屬性
  color: #fff;
}

　　index.js

import { test } from ‘./index.scss‘;

document.querySelector(‘.test‘).className=test;

實際輸出效果:

css-modules [webpack4x] (多人開發防止全局汙染)