css-modules [webpack4x] (多人開發防止全局汙染)
阿新 • • 發佈:2018-12-04
amp step -m 效果 -s select 簡介 bubuko info
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] (多人開發防止全局汙染)