标签：htm .config stc bubuko tor css alt document style
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] (多人开发防止全局污染)
标签：htm .config stc bubuko tor css alt document style
原文地址：https://www.cnblogs.com/rushAvenda/p/10065619.html
