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

发布时间：2020-12-15 20:32:35 所属栏目：百科来源：网络整理

导读：先看? webpack.config.dev.js ?里的相关代码： // style files regexes const cssRegex = /.css$/ ;const cssModuleRegex = /.module.css$/ ;const sassRegex = /.(scss|sass)$/ ;const sassModuleRegex = /.module.(scss|sass)$/ ; // common functio

先看?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,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,‘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 文件。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!