我們在用react腳手架搭建項目的時候,webpack的相關配置已經被隱藏了。如果要解決less樣式無效這個問題,那麼我們需要先把webpack的相關配置暴露出來。
先貼一下我react和webpack的版本,因爲我在查資料的時候發現config最後暴露出來的文件和網上的不一樣。
1、安裝less依賴
npm install less less-loader
2、暴露配置:
npm run eject
3、修改配置文件
經過第二步之後,你的項目會多一個config的文件夾,裏面的內容如上圖。
然後需改一下webpack.config.js即可。
(1)、在47行左右添加lessRegex 和lessModuleRegex ,參考上面的cssRegex和cssModuleRegex
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
(2)、在73行左右添加一個loader
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
// css is located in `static/css`, use '../../' to locate index.html folder
// in production `paths.publicUrlOrPath` can be a relative path
options: paths.publicUrlOrPath.startsWith('.')
? { publicPath: '../../' }
: {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
loader: require.resolve('less-loader')
},
圖中的最後一個大括號的內容。
(3)、在326行左右你會看到一個module,裏面有strictExportPresence,rules等參數。再配置兩個關於less的參數即可。參照463行左右的sassRegex和sassModuleRegex。
{
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'
),
},
最後重啓項目,然後坐等Compiled successfully!的提示就好了。