CSS Modules
Modern.js 为 CSS Modules 提供了开箱即用的支持。
文件后缀形式 CSS Modules
默认情况下,以 .module.(css|scss|sass|less)
结尾的文件会作为 CSS Modules 文件处理,例如:
button.module.css
.redColor {
color: red;
}
Button.jsx
import styles from './button.module.css';
export default function Button() {
return (
<button type="button" className={styles.redColor}>
red button
</button>
);
}
最终将被编译为
<button type="button" className="button_redColor__1-RBg">
red button
</button>;
全面启用 CSS Modules
如果想去掉文件名中 .module
后缀,可以设置 output.disableCssModuleExtension
。
设置后,除了 node_modules/
目录下的样式文件和文件名称格式为 [name].global.(css|scss|sass|less)
之外的所有样式文件,都会作为 CSS Modules 处理。
如果此时需要全局样式,可以通过创建文件名称格式为 [name].global.(css|less|scss|sass)
的样式文件来解决, 例如:
app.global.css
.bg-blue {
background-color: blue;
}
button.css
.redColor {
color: red;
}
App.jsx
import './app.global.css';
import styles from './button.css';
export default function Button() {
return (
<button type="button" className={`${styles.redColor} bg-blue`}>
button
</button>
);
}
最终将被编译为:
<button type="button" className="button__redColor--JsFYl bg-blue">
button
</button>;
最终效果如下:
提示
使用 babel-plugin-react-css-modules 时需要注意,该插件的配置选项 generateScopedName
需要和 output.cssModuleLocalIdentName
保持一致。