本篇文章探讨了JavaScript基础教程之ant design样式不生效官方解决方案，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

<

在config-overrides.js里面将原内容替换成
const { injectBabelPlugin, getLoader } = require("react-app-rewired");
const fileLoaderMatcher = function(rule) {
  return rule.loader && rule.loader.indexOf(`file-loader`) != -1;
};
module.exports = function override(config, env) {
  // babel-plugin-import
  config = injectBabelPlugin(
    [
      "import",
      {
        libraryName: "antd",
        //style: ‘css‘,
        style: true // use less for customized theme
      }
    ],
    config
  );
  // customize theme
  config.module.rules[1].oneOf.unshift({
    test: /\.less$/,
    use: [
      require.resolve("style-loader"),
      require.resolve("css-loader"),
      {
        loader: require.resolve("postcss-loader"),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebookincubator/create-react-app/issues/2677
          ident: "postcss",
          plugins: () => [
            require("postcss-flexbugs-fixes"),
            autoprefixer({
              browsers: [
                ">1%",
                "last 4 versions",
                "Firefox ESR",
                "not ie < 9" // React doesn‘t support IE8 anyway
              ],
              flexbox: "no-2009"
            })
          ]
        }
      },
      {
        loader: require.resolve("less-loader"),
        options: {
          // theme vars, also can use theme.js instead of this.
          modifyVars: { "@brand-primary": "#1DA57A" }
        }
      }
    ]
  });
  // css-modules
  config.module.rules[1].oneOf.unshift({
    test: /\.css$/,
    exclude: /node_modules|antd\.css/,
    use: [
      require.resolve("style-loader"),
      {
        loader: require.resolve("css-loader"),
        options: {
          modules: true,
          importLoaders: 1,
          localIdentName: "[local]___[hash:base64:5]"
        }
      },
      {
        loader: require.resolve("postcss-loader"),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebookincubator/create-react-app/issues/2677
          ident: "postcss",
          plugins: () => [
            require("postcss-flexbugs-fixes"),
            autoprefixer({
              browsers: [
                ">1%",
                "last 4 versions",
                "Firefox ESR",
                "not ie < 9" // React doesn‘t support IE8 anyway
              ],
              flexbox: "no-2009"
            })
          ]
        }
      }
    ]
  });
  // file-loader exclude
  let l = getLoader(config.module.rules, fileLoaderMatcher);
  l.exclude.push(/\.less$/);
  return config;
};
 
默认使用的是create-react-app生成是项目，使用的是ant-design    

      本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！