Webpack3中React项目Sass样式重复导入问题解决方案问询

我完全懂你现在的困扰——为了方便每个组件能直接用base.scss里的变量、混合宏，给每个组件样式都注入@import base.scss，结果生产构建时40个组件就把基础样式重复打包了40次，冗余得离谱。虽然optimize-css-assets-webpack-plugin@3.2.0能事后清理，但从根源解决才是最优解，而且完全不用拆分变量和基础样式，下面给你几个Webpack3下依然靠谱的方案：

方案1：用sass-resources-loader全局注入共享资源 #

这个loader可以说是为你的场景量身定做的——它能把base.scss里的变量、混合宏、函数这类非实体样式资源全局注入到所有组件的sass文件中，你再也不用在每个组件里手动写@import base.scss了，自然就不会重复打包基础样式的实体代码。

具体配置： #

1. 安装适配Webpack3的版本：

npm install sass-resources-loader@1.3.3 --save-dev

2. 修改Webpack的sass规则配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.sass$/,
        use: [
          // 开发环境用style-loader，生产环境建议搭配extract-text-webpack-plugin提取单独CSS文件
          process.env.NODE_ENV === 'production' 
            ? ExtractTextPlugin.extract('css-loader') 
            : 'style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              // 填你的base.scss绝对路径或相对路径
              resources: './src/frontend/sass/base.scss'
            }
          }
        ]
      }
    ]
  }
};

划重点：这个loader只会注入变量、混合宏这类"抽象"资源，不会把base.scss里的全局重置样式、通用类重复打包，完美兼顾了便利性和打包效率。

方案2：用node-sass-import-once在编译层面阻止重复导入 #

如果你不想改现有组件里的@import base.scss写法，那node-sass-import-once就是你的最佳选择——它是一个Sass导入器，能确保每个sass文件不管被引用多少次，只会被编译一次。

具体配置： #

1. 安装适配版本：

npm install node-sass-import-once@1.2.0 --save-dev

2. 在sass-loader的配置里添加这个导入器：

module.exports = {
  module: {
    rules: [
      {
        test: /\.sass$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              importer: require('node-sass-import-once'),
              importOnce: {
                index: true,
                css: true,
                bower: true
              }
            }
          }
        ]
      }
    ]
  }
};

这个方案零侵入，你不用修改任何组件代码，只需要添加这个配置，就能从编译层面彻底解决重复导入的问题。

方案3：结合extract-text-webpack-plugin提取公共基础样式 #

如果你的项目已经在提取CSS到单独文件，可以把base.scss作为单独入口提前打包，组件样式只依赖它的变量等资源，避免重复打包实体代码。

具体配置： #

1. 安装Webpack3兼容的版本：

npm install extract-text-webpack-plugin@3.0.2 --save-dev

2. 拆分样式入口并配置插件：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 单独提取基础样式
const extractBase = new ExtractTextPlugin('css/base.[contenthash].css');
// 提取组件样式
const extractComponents = new ExtractTextPlugin('css/components.[contenthash].css');

module.exports = {
  entry: {
    // 把base.scss作为单独入口，提前打包
    base: './src/frontend/sass/base.scss'
  },
  module: {
    rules: [
      {
        test: /base\.scss$/,
        use: extractBase.extract({
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /\.sass$/,
        exclude: /base\.scss$/,
        use: extractComponents.extract({
          use: [
            'css-loader',
            {
              loader: 'sass-loader',
              options: {
                // 让组件样式能找到base.scss所在目录，方便导入变量等
                includePaths: ['./src/frontend/sass']
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [extractBase, extractComponents]
};

记得在你的入口JS文件里引入打包后的base.css，这样全局样式就能生效，组件样式里依然可以正常使用base.scss里的变量和混合宏，且不会重复打包实体代码。

方案对比参考 #

内容的提问来源于stack exchange，提问作者Frank N