vue.js - sass-loader additionalData/prependData/data bloats 包大小

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(以访问主题变量)，它最终将整个东西复制到我需要变量的任何地方。
我通过在单独的文件中定义自定义变量并在“覆盖变量”文件中使用这些变量来解决此问题，如下所示:
自定义变量.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

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

These files will be imported and available to every component you write, which is great for things like variables, functions, or mixins, but you should avoid any actual CSS rules. Adding CSS rules to your shared Sass files will import those rules into every component and bloat your project. For global CSS rules, create a separate file and import it into your main App.vue file instead.

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