Open yaogengzhu opened 4 years ago
在react项目中,如果我们使用css, 或者scss ,最终会被打包到一个文件中,这时会产生css被覆盖的情况出现! 解决方案有以下 尽可能使用复杂的css命名 (low) 使用css-in-jss (引入多余的模块, 而且比较麻烦) 使用react-app-rewire-css-modules
在react项目中,如果我们使用css, 或者scss ,最终会被打包到一个文件中,这时会产生css被覆盖的情况出现!
对于react 项目,我们需要对webpack,进行重写,重写的过程不再赘述。
新建文件config-overrides.js
config-overrides.js
const { injectBabelPlugin } = require('react-app-rewired'); const rewireCssModules = require('react-app-rewire-css-modules'); const path = require('path') function resolve (dir) { return path.join(__dirname, '.', dir) } module.exports = function override(config, env) { // do stuff with the webpack config... //启用ES7的修改器语法(babel 7) config = injectBabelPlugin(['@babel/plugin-proposal-decorators', { "legacy": true }], config) //{ "legacy": true }一定不能掉,否则报错 //按需加载UI组件 config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config); //配置别名,设置@指向src目录 config.resolve.alias = { '@': resolve('src') } //css模块化 config = rewireCssModules(config, env); return config; };
pack.json
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", }
更改scss的命名, 如 xxxx.module.scss
xxxx.module.scss
import React from 'react' import styles from './xxx.module.scss' function Header() { return ( <div calssName={ styles.name }> </div> }
在ts结合的项目中,设置了上面的远远不够, 我们要结合 tsconfig.json , 在该文件最后一行补充
"extends": "./paths.json"
同级目录下新建pahts.json文件 { "compilerOptions": { "baseUrl": "src", "paths": { "@/*": ["*"] } } }
同级目录下新建pahts.json文件
pahts.json
{ "compilerOptions": { "baseUrl": "src", "paths": { "@/*": ["*"] } } }
webpack 配置!!!
新建文件
config-overrides.js
简单说下需要改的
pack.json
如何使用