利用css-loader进行css隔离方案

原理就是利用 css-loader 的css-module方案进行, 可以将每个css类名进行单独配置, 同时将css类名一一对应到元素里面种

webpack 配置

// webpack.config.js
// module/rules/test:css
{
    loader: 'css-loader',
    options: {
        modules: {
        // 生产环境中直接使用base64的前20位, 用于隐藏css类名, 开发环境就不使用代码混淆
            localIdentName: isProduction ? '[hash:base64:20]' : '[local]',
        },
    }
},

页面使用

import appCss from './app.css';
const App = () => {
  return <div>
		<div className={appCss.bbb}>
			bbb
		</div>
		<div className={appCss.aaa}>
			aaa
		</div>
	</div>
}
export default App

打生产包

可以看到，利用css-module机制是可以成功进行css隔离，保证css的唯一性

注意点

modules.mode的global配置会覆盖所有的css-module并使其失效, 如果将其设置为global后

import appCss from './app.css';

这里面的appCss将会是一个空对象

当modules.mode设置为local时, 如果任意文件的某个css值不想成为css-module, 那么就可以使用:global()进行包裹

例如

/* src/app.css */
:global(.ccc) {
  /* some styles */
	background-color: red;
}

// src/App.tsx
import appCss from './app.css';
const App = () => {
	console.log(appCss, "appCss");// 这里面是没有:global包裹的类名的
  return <div className='ccc'>
		<div className={appCss.bbb}>
			bbb
		</div>
		<div className={appCss.aaa}>
			aaa
		</div>
	</div>
}

export default App