create-react-app创建的react项目怎么引入less文件
通过create-react-app创建的项目并没有暴露出webpack的相关配置,所以我们要通过运行npm run eject来显示webpack相关文件。项目中会多出一个config目录,它里面就包含了webpack的相关配置文件。
1. 显示webpack配置文件
npm run eject
如果运行npm run eject报错,先运行 git add . 和 git commint -m ‘app init’ 这两个命令,在运行npm run eject命令即可.
2. 安装less和less-loader
npm install less less-loader -S-D
3. 配置webpack.config.js文件
// config/webpack.config.js // 添加 less 解析规则,可以仿照项目对sass的支持 const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; // 再在rules数组中添加下面一段代码 // Less 解析配置 { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'less-loader' ), sideEffects: true, }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'less-loader' ) },