避免webpack3客户端捆绑包中的冗余sass导入

Question

我遇到了一个问题,我的reactjs项目中的常见sass样式最终在客户端包中冗余...

1)我有一组基本样式:

/src/frontend/sass/
    base.scss  the master file, which imports the following…
    ? common.sass
    ? colors.sass
    ? breakpoints.sass
    ? forms.sass
    ? ...

2)和每个组件带有'.sass'文件的webpack项目......

Input/style.sass
Modal/style.sass
TeaserPage/style.sass
…

3)每个组件样式文件都是webpack.config中注入的'@import base.scss',这样我就可以访问变量,混合或扩展类......

        {
            test: /\.(sass|scss)$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'postcss-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            data: `@import '${resolve(__dirname, 'src', 'frontend', 'sass').replace(/\\/g, '/')}/base';`,
                            sourceMap: false
                        }
                    }
                ]
            })
        },

这对开发来说很好(有react-hot-loader),但在发布模式下,当我想构建一个紧凑的客户端捆绑包时,这会导致40倍的冗余(......来自40个组件).

问题是→当然 →不是 →新的,仍然是webpack 3的正确解决方案？

• 首先连接,然后处理？
• 一个(工作,非过时)import-once模块？
• (可怕的解决方法):将变量/ mixins与基本样式分开(将表单或断点分解为碎片)

• 或者我可以以某种方式做一个像...这样的webpack配置？

  (如果我正确理解webpack语法,请阅读↑自下而上↑...)

  use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: [
          {
              loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader',
              3) do your sass?css conversion and post thing
          {
              loader: 'sass-loader',
              2) ...load (concatenate to 1) component styles
          },
          {
              loader: 'sass-loader',
              1) ...load that base.sass
          },
  
      ]
  })
  

  • ...或者是否有一个非过时的(或者这些天甚至包括在webpack本身？)某个地方的sass-import-once功能？

---

我找到了optimize-css-assets-webpack-plugin(对于你需要的webpack 3 @3.2.0),它可以作为某种修复工具.清理最后阶段的混乱,但不是,我宁愿想要的(即:通过首先导入一次/连接来避免创建混乱......).