http://www.cnblogs.com/wuqun/p/10131483.html
新版脚手架修改主题主要有两点 (*・ω-q)
1、webpack.config.dev.js和 ....prod.js中 style必须为true,而不是css
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
},
},
},
],
//style设置成true!!!!!!
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true // `style: true` 会加载 less 文件
}]
],
2、修改webpack.config.dev.js
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
require.resolve('style-loader'),
{
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,
}),
],
},
},
];
if (preProcessor) {
// loaders.push(require.resolve(preProcessor));
//添加修改代码
let loader = require.resolve(preProcessor)
if (preProcessor === "less-loader") {
loader = {
loader,
options: {
modifyVars: {
'primary-color':'#DC143C',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
}
}
}
loaders.push(loader);
}
return loaders;
};
修改webpack.config.prod.js
const loaders = [
{
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
{
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,
}),
],
sourceMap: shouldUseSourceMap,
},
},
];
if (preProcessor) {
// loaders.push({
// loader: require.resolve(preProcessor),
// options: {
// sourceMap: shouldUseSourceMap,
// },
// }
//修改添加代码
if (preProcessor === "less-loader") {
loader.options.modifyVars = {
'primary-color': '#DC143C',
'link-color': '#1DA57A',
'border-radius-base': '2px',
}
loader.options.javascriptEnabled = true
}
loaders.push(loader);
}
return loaders;
};