React脚手架怎么用less?
yarn eject//暴露脚手架配置
在暴露的config文件里面打开webpack.config.js文件
然后设置less
66行 插入less更改:
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
500行,插入:
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
}, "less-loader"),
// 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: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
}, "less-loader"),
},
- 安装对应的包
yarn add less less-loader@5.0.0//在这里安装的less-loader的包是低版本 高版本可能存在不兼容的问题
- 配置全部变量(在react-app-env.d.ts文件里加入)
declare module '*.less' {
interface Style {
[propName: string]: string
}
const style: Style
export default style
}
- 引用
文件名字为style.module.less
引入 import style from './style.module.less'