sass-loader additionalData/prependData/data 膨胀包大小答案

【问题标题】：sass-loader additionalData/prependData/data bloats bundle sizesass-loader additionalData/prependData/data 膨胀包大小
【发布时间】：2021-09-19 01:38:06
【问题描述】：

我正在使用 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 实例，这并不重要，因为它真的很小。所以我仍然很乐意听到其他解决方案！

【问题讨论】：

标签： vue.js webpack sass vuejs2 laravel-mix

【解决方案1】：

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

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

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

【讨论】：