关于create-react-app 3.0.1配置babel-plugin-react-css-modules的问题

**Ceilon** · August 15, 2019, 7:35am

看了网上的文档，需要暴露出webpack.config.js于是照做了，可是按照网上的一系列配置，似乎完全不生效，不知道有没有会配置的大佬给我看看最新的配置文档。

当前create-react-app版本是3.0.1，暴露出的webpack配置和网上的都不太一样，如下

这里是文件夹，没有webpack.config.dev.js这个文件

看了下webpack.config.js文件内容和以前版本有区别，css配置如下:

  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: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      });
    }
    return loaders;//这里将use配置整个返回出去
  };







//这里是对css和less支持的配置

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;

     {
              test: cssModuleRegex,
              use: getStyleLoaders({
                module: true,
                localIdentName: '[local]-[hash:base64:10]',
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },'less-loader'),
            }

接下来按照’这位大佬的文档’进行了一系列配置，如下:

1565854071454

mark