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;

實際輸出效果: