找到webpack.config.js里的这部分

// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve(‘style-loader’),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { 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(preProcessor),
options: {
/*这里添加 */

 modifyVars: { "@primary-color": "#f9c700" },

sourceMap: isEnvProduction && shouldUseSourceMap,
},
});
}
return loaders;

};

  • 前提是less的已经配置为支持了，且配置less时要style=true
  • 当然也可参考官方也有在不暴露情况下自定义的方法