第一步暴露配置:
yarn eject
第二步实现antd按需加载
yarn add babel-plugin-import
// 修改package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
第三步less引入
yarn add less less-loader -S-D
// 修改config目录下webpack.config.js文件
// 其实就是复制sass的配置修改成less
// 复制并添加**+**后面的内容
// style files regexes
+const lessRegex = /\.less$/;
+const lessModuleRegex = /\.module\.less$/;
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
+ {
+ test: lessRegex,
+ exclude: lessModuleRegex,
+ use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
+ },
+ // Adds support for CSS Modules, but using SASS
+ // using the extension .module.scss or .module.sass
+ {
+ test: lessModuleRegex,
+ use: getStyleLoaders(
+ {
+ importLoaders: 2,
+ modules: true,
+ getLocalIdent: getCSSModuleLocalIdent,
+ },
+ 'less-loader'
+ ),
+ },
第四步主题定制
// 同样是config目录下webpack.config.js文件
//if (preProcessor) {
// ...
// }
if (preProcessor) {
+ let loader = require.resolve(preProcessor)
+ if (preProcessor === "less-loader") {
+ loader = {
+ loader,
+ options: {
+ modifyVars: { //自定义主题
+ 'primary-color':' #1890ff ',
+ },
+ javascriptEnabled: true,
+ }
+ }
+ }
+ loaders.push(loader);
}
// 修改第二步package.json下的"style": "css",改为"style": true
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}
问题:在使用yarn eject暴露webpack配置后,再次使用yarn start 不能启动项目,显示缺少某包
解决:删除node-modules,使用npm或cnpm重新npm install
解答评论中的问题:
// common function to get style loaders
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,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
},
}
);
let loader = require.resolve(preProcessor)
if (preProcessor === "less-loader") {
loader = {
loader,
options: {
modifyVars: { //自定义主题
'primary-color': '#006699',
'@link-color': '#006699'
},
javascriptEnabled: true,
}
}
}
loaders.push(loader);
}
return loaders;
};