yarn create react-app antd-demo-ts --template typescript
yarn add babel-plugin-import
yarn add less-loader less
yarn eject 暴露
配置package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}
配置 webpack.config
// 新增
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
//修改添加lessOptions因为less6.20配置不同
const getStyleLoaders = (cssOptions, preProcessor, lessOptions) =>
if (preProcessor) { //当preProcessor存在即新增loader
{
loader: require.resolve(preProcessor),
options: { ...cssOptions, ...lessOptions },//只有在less中合并lessOptions。假如不单独新增lessOptions参数,与cssOptions合并在一起就会报错,因为是函数集中处理会为其它loader添加lessOptions配置,而6.2.0的配置与其它不同
}
}
//新增
{
test: lessRegex,
use: getStyleLoaders(
{
sourceMap: isEnvProduction && shouldUseSourceMap,
},
"less-loader",
{
lessOptions: {
javascriptEnabled: true,
},
}
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
sourceMap: isEnvProduction && shouldUseSourceMap,
},
"less-loader",
{
lessOptions: {
javascriptEnabled: true,
},
}
),
},