create-react-app中antd样式和css modules共存

第一步 需要使用命令把webpack隐藏的配置文件显示出来

	npm run eject

第二步 打开webpack.config.js文件

第三步 在文件中找到这两处

第四步 下边两段代码直接覆盖, 然后重新运行就正常了

1. 普通的css配置也就是开启css modules的配置

 {
	test: /\.css$/,
	 exclude: /node_modules|antd\.css/,
	 use: [
	   require.resolve('style-loader'),
	   {
	     loader: require.resolve('css-loader'),
	     options: {
	       importLoaders: 1,
	       // 改动
	       modules: true,   // 新增对css modules的支持
	       localIdentName: '[name]__[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',
	         }),
	       ],
	     },
	   },
	 ],
  },

2. 这个是antd样式(node_modules中css)的配置不开启css modules

  {
    test: /\.css$/,
    include: /node_modules|antd\.css/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
          // 改动
          // modules: true,   // 新增对css modules的支持
          // localIdentName: '[name]__[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',
            }),
          ],
        },
      },
    ],
  },