【分享总结】webpack配置改变antd主题颜色

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;
};