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）和一个带有＆＃39; .sass＆＃39;的webpack项目每个组件的文件......

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

3）每个组件样式文件都是＆＃39; @import base.scss＆＃39;注入webpack.config，这样我就可以访问变量，混合或扩展类......

        {
            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），但在发布模式下，当我想构建一个 compact 客户端捆绑包时，这会导致40倍冗余（......来自40个组件）。

问题是→certainly →not →new，仍然是webpack 3的正确解决方案吗？

首先连接，然后处理？
A（工作，未过时）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（对于你需要的{3}}的webpack 3），它可以作为某种修复方式。清理最后阶段的混乱，但不是，我宁愿想要的（即：通过首先导入一次/连接来避免创建混乱......）。

避免在webpack3客户端捆绑包中进行多余的sass导入

0 个答案: