网上看了很多配置,最后才发现create-react-app2.0后就不用eject就可以使用css module特性,那么less仿照css的配置即可
1.css module的使用
将CSS文件名为[filename].module.css
import styles from './index.module.css';
2.配置less
- 暴露webpack配置文件
cnpm run eject
安装lessless-loader依赖
npm install less less-loader --save-dev
- 修改webpack.config.js文件配置,一共修改三处
第一处:增加定义变量```const cssRegex = /\.css$/;const cssModuleRegex = /\.module\.css$/;const sassRegex = /\.(scss|sass)$/;const sassModuleRegex = /\.module\.(scss|sass)$/;const lessRegex = /\.less$/;const lessModuleRegex = /\.module\.less$/;```第二处:仿照css配置less```{ test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, }), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, // Adds support for CSS Modules (https://github.com/css-modules/css-modules) // using the extension .module.css { test: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }), }, // Opt-in support for SASS (using .scss or .sass extensions). // By default we support SASS Modules with the // extensions .module.scss or .module.sass { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, }), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, // Adds support for CSS Modules (https://github.com/css-modules/css-modules) // using the extension .module.css { test: lessModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }), },```第三处:修改getCSSModuleLocalIdent函数内部,增加less![图片描述][2]
3测试是否安装成功
- 建立以module.less为结尾的less文件
通过module引入less到index
import styles from './my.module.less' render() { console.log(styles.text) return ( <div> <div className={styles.text}>Hello World</div> </div> ) }