react中安裝及配置less
阿新 • • 發佈:2020-09-16
react專案中使用less
1. 暴露webpack配置項,安裝依賴
react專案建立的時候是看不到webpack相關的配置檔案的,所以需要先暴露出來,使用下面的命令:
npm run eject
然後安裝less相關的依賴:
yarn add less less-loader -D
2. 修改webpack.config.js
進入config目錄下的webpack.config.js檔案中,新增下面兩行
const lessRegex= /\.less$/;
const lessModuleRegex=/\.module\.less$/;
然後新增lessRegex和lessModuleRegex
{ test: sassModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction && shouldUseSourceMap, modules: { getLocalIdent: getCSSModuleLocalIdent, }, }, 'sass-loader' ), }, //下面為新新增的 { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'less-loader' ), sideEffects: true, }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction && shouldUseSourceMap, modules: { getLocalIdent: getCSSModuleLocalIdent, }, }, 'less-loader' ), },
3. 在專案中使用
function App() {
return (
<div className="App">
my blog
<div className="myblog">
這是後臺管理系統
</div>
</div>
);
}
.App{
font-size: 26px;
color: red;
.myblog{
background: lightblue;
}
}