react中关于create-react-app2里css相关配置

先看 webpack.config.dev.js 里的相关代码：

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
 
// common function to get style loaders
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));
  }
  return loaders;
};
 
module.exports = {
  mode: 'development',
// ...
  module: {
// ...
     {
       oneOf: [
// ...
        {
            test: cssRegex,
            exclude: cssModuleRegex,
            use: getStyleLoaders({
              importLoaders: 1,
            }),
          },
          // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
          // using the extension .module.css
          {
            test: cssModuleRegex,
            use: getStyleLoaders({
              importLoaders: 1,
              modules: true,
              getLocalIdent: getCSSModuleLocalIdent,
            }),
          },
          // Opt-in support for SASS (using .scss or .sass extensions).
          // Chains the sass-loader with the css-loader and the style-loader
          // to immediately apply all styles to the DOM.
          // By default we support SASS Modules with the
          // extensions .module.scss or .module.sass
          {
            test: sassRegex,
            exclude: sassModuleRegex,
            use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
          },
          // Adds support for CSS Modules, but using SASS
          // using the extension .module.scss or .module.sass
          {
            test: sassModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'sass-loader'
            ),
          }
// ...
}；

4 个 样式文件后缀的正则表示，这份配置里是将普通 (s)css 文件和 (s)css module 文件是按文件名后缀不同而区分对待的，前者视为普通 css 文件，而处理后者时开启 css-loader 的 module 模式。这样做的一个好处是区分明确，全局的 class 样式加写到 .(s)css 文件里，需要加 hash 的局部样式就写到 .module.(s)css 文件里，这样也可以不用在想要写一个全局样式时把 class 包到 :global() 里了。

getStyleLoaders 是一个返回 loader 配置的函数，内部默认有 ['style-loader', 'css-loader', 'postcss-loader'] 三个 loader。函数接受两个参数，其中第一个是 css-loader 的 option 配置。第二个是视需要添加 sass-loader 或者 less-loader。需要添加 postcss 插件，可以在 getStyleLoaders 里对应的 plugin 配置里加。以上就是 development 下关于样式的配置，下面看看 production 里不一样的地方：

// style-loader 换成了下面的内容
    {
      loader: MiniCssExtractPlugin.loader,
      options: Object.assign(
        {},
        shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
      ),
    },

此外配置里还多了 mini-css-extract-plugin、optimize-css-assets-webpack-plugin、postcss-safe-parser 这三个东西，第一个的作用是将构建后的 css 样式，生成 .css 文件，然后以 link 标签的形式插入到模板 html 中；第二个和第三个的作用是压缩 css 文件。