在 Create React App 脚手架创建的项目中使用 CSS Modules 。
第一种方式
create-react-app 中内置了使用 CSS Modules 的配置,create-react-app 内置的用法是将所有的 .css
/ .less
/ .scss
等样式文件都修改成 .module.css
/ .module.less
/ .module.scss
等。
即可使用 CSS Modules 的方式进行引入使用了。
编写一个 css 文件:Button.module.css
.error { background-color: red; }
编写一个普通的 css 文件:another-stylesheet.css
.error { color: red; }
在 js 文件中使用 CSS Modules 的方式进行引用:Button.js
import React, { Component } from 'react'; import styles from './Button.module.css'; // 使用 CSS Modules 的方式引入 import './another-stylesheet.css'; // 普通引入 class Button extends Component { render() { // reference as a js object return <button className={styles.error}>Error Button</button>; } }
此时 Button 组件的背景颜色是红色,但是字体颜色却不是红色,因为使用了 Css Modules 之后,普通的 css 样式就不起效果了,需要用全局(:globa
l)的方式编写才可以。
第二种方式
使用命令:
npm run eject
此命令会将脚手架中隐藏的配置都展示出来,此过程不可逆
运行完成之后,打开 config/webpack.config.js 文件,找到 test: cssRegex
这一行,在 use
属性执行的方法中添加 modules: true
,如下:
test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, modules: true, sourceMap: isEnvProduction && shouldUseSourceMap, })
该方法同样需要引入,只是名字不需要是 .module.css
了。
如想使用第二种方式对 sass
和 less
也使用 CSS Modules 的方式进行引用,则类似的在 sass
和 less
解析配置上也添加 modules: true
即可。
本文关键词:create-react-app中CSS Module不生效的解决办法、create-react-app中CSS Module不生效、create-react-app CSS Module配置、create-react-app中使用CSS Module、create-react-app中CSS Module的使用方法
未经允许不得转载:前端资源网 - w3h5 » create-react-app中CSS Module不生效的解决办法