/prependData/data bloats包大小

Question

我使用的是Vue2和laravel，我希望我的变量可以在全球范围内访问。我终于找到了这个：

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;

overwriting-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

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

将导入这些文件，并将其提供给您编写的每个组件，这对于变量、函数或混搭之类的东西非常有用，但是您应该避免使用任何实际的CSS规则。将CSS规则添加到共享的Sass文件中，将这些规则导入到每个组件中，并使您的项目变得臃肿起来。对于全局CSS规则，创建一个单独的文件并将其导入主App.vue文件。

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