前言
最近在使用react开发项目，常用UI组件是Ant D，使用less进行封装。创建项目使用的create-react-app脚手架，将webpack封装得很完善，接下来博主将告诉你具体步骤。
具体步骤
-
npm run eject
出现如图所示：
webpack.png -
npm i less less-loader
一定要下载less,踩了一下坑 - 点击webpack.config.js进行配置的更改
- 添加变量到相应位置
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
添加变量.png
- 对应函数中添加参数
lessOptions
{
loader: require.resolve('less-loader'),
options: lessOptions,
}
添加参数.png
- 对应位置添加代码
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},'less-loader'),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
getLocalIdent: getCSSModuleLocalIdent,
modules: true,
},'less-loader'),
},
添加代码.png
按需加载
npm i babel-plugin-import- 修改webpack配置
添加如下代码
[
require.resolve('babel-plugin-import'),
{
libraryName: 'antd',
style: 'css'
}
],
webpack配置.png
-
修改package.json 文件
package.json文件修改.png
npm run start 重启项目即可；该方法适用less版本为3.x,低版本没有做过相应尝试，有兴趣可以自己试一试
