如何使 sass 文件全局化，而不是将其导入到每个文件中并膨胀包大小？

Question

问题
如何全局导入variables.scss 1. 而不在每个文件中导入它们 2. 通过引用而不是在我的构建中复制它们？

设置
我使用 Vue2 和 laravel-mix，并且在index.scss导入了main.js

变量.scss

$--test: #ff0000;

索引.scss

@import 'variables';

.dashboard-title {
    color: $--test;
}

这将标题着色为红色。 但是当我尝试在组件内部做同样的事情时，它不起作用：

<style scoped lang="scss">
    .dashboard-title {
       color: $--test;
    }
</style>

这不起作用，但我在第一个示例中证明了index.scss是全局的。 当我将它导入到我的全局index.scss时， variables.scss如何不是全局的？

我可以通过在组件中导入变量文件来修复错误，但是通过这样做，我基本上每次在 vue 组件中导入它时都会复制整个variables.scss文件。 我通过使用 webpack 包分析器分析我的包发现了这一点，这是输出： webpack 包分析图像
（所有蓝色交叉部分的大小都增加了，因为变量文件是导入的，现在这不是大问题，但这会随着时间成倍增加我的包大小）
它现在可以将我的捆绑包大小减少至少 20%...

如何引用variables.scss文件而不是复制其内容？

我试过的：
https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/ （我无法将其“迁移”到 Laravel -混合配置）
我还尝试使用purgeCss删除重复的 css，这完全弄乱了我的样式，但将包大小减少了 50% 哈哈
将此添加到webpack.mix.js

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";`
                        }
                    }
                ]
            }
        ]
    }
})

这确实使变量成为全局变量，但会为每个 vue 组件导入（复制）它们，即使它们没有被使用。

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

$red: #ff0000;

覆盖-variables.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

如果您在 index.scss 中导入每个 .scss，那么每个变量都应该可以工作。 在你的 vue.config 中试试这个

  css: {
        loaderOptions: {
            // by default the `sass` option will apply to both syntaxes
            // because `scss` syntax is also processed by sass-loader underlyingly
            // but when configuring the `data` option
            // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
            // in that case, we can target the `scss` syntax separately using the `scss` option
            scss: {
                prependData: `@import "@/style/index.scss"`
            }
        }
    },

Answer 2

所以我让它与 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";`
                        }
                    }
                ]
            }
        ]
    }
})

尚不确定这是否可以防止重复

编辑：这并不妨碍重复，它确实提高每个VUE组件的集束大小。 所以我现在有一个大 150% 的包，因为变量文件被导入到每个 vue 组件中。 即使变量甚至没有被使用。