一闸度、配置less
在配置less之前，我使用create-react-app即硼，得到React版本為^16.8.6汗唱。
- 安裝依賴并解構(gòu)目錄：（可以在命令前加
sudo確保不會出現(xiàn)權(quán)限問題）
yarn add babel-plugin-import 或 npm install babel-plugin-import
yarn less-loader 或 npm install less-loader
yarn eject 或 npm run eject
解構(gòu)后，我得到的webpack版本為4.28.3份招，config文件夾長這樣：
image.png
于是切揭，打開webpack.config.js修改配置：
在第42行附近修改代碼為：
// 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$/; //新增
在第327行附近修改代碼為：
oneOf: [
{
...//其他配置
}，
...//其他配置
//配置less-loader（新增）
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},
//EndOf配置less-loader（新增）
...//其他配置
]
二锁摔、配置antd定制主題
修改package.json：
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": true //這里是 true 不是 'css'
}
]
]
}
在webpack.config.js第110行附近修改代碼為：
image.png
if (preProcessor) {
let loader = {
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap
}
};
if (preProcessor === "less-loader") {
loader = {
...loader,
options: {
modifyVars: {
//自定義主題
"primary-color": " #1890ff",
'border-radius-base': '2px'
},
javascriptEnabled: true
}
};
}
loaders.push(loader);
}
更多樣式修改可以看文檔~
