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 文件。