sass-loader extraData/prependData/data 使包大小膨胀

Question

我正在使用 Vue2 和 laravel-mix，我希望我的变量可以全局访问。我最终发现了这个：

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader:  'sass-loader',
                        options: {
                            //this might be "data" or "prependData" depening on your version
                            additionalData: `@import "./resources/js/styles/variables.scss";`
                        }
                    }
                ]
            }
        ]
    }
})

这确实使我的变量可以全局访问，但本质上是将其复制variables.scss到每个 vue 组件中，这极大地膨胀了我的包大小。

我怎样才能防止这种情况发生？

编辑：当导入的文件相对较大时，这只是一个问题。在我的项目中，导入的文件本身导入了一个主题 scss（以访问主题变量），它最终将整个内容复制到我需要变量的任何地方。
我通过在单独的文件中定义自定义变量并在“覆盖变量”文件中使用这些变量来解决此问题，如下所示：
custom-variables.scss

$red: #ff0000;

覆盖变量.scss

import 'theme.scss'; //this bloated my project
import 'custom-variables';

$--theme-red: $red

当我在 vue 组件中需要这种主题颜色时，我只是导入了而custom-variables.scss不是overwriting-variables.scss.
这确实解决了我的膨胀问题，但并没有完全解决问题，custom-variables.scss我的项目中仍然有多个实例，这并不重要，因为它真的很小。所以我仍然很高兴听到其他解决方案！

Answer 1

您需要将函数、变量和 mixin 与实际的 CSS 规则分开。

这些文件将被导入并可供您编写的每个组件使用，这对于变量、函数或 mixin 等非常有用，但您应该避免任何实际的 CSS 规则。将 CSS 规则添加到共享 Sass 文件中会将这些规则导入到每个组件中，并使您的项目变得臃肿。对于全局 CSS 规则，请创建一个单独的文件并将其导入到主 App.vue 文件中。

来源： https: //austingil.com/global-sass-vue-project/