我如何使sass文件是全局的，而不是在每个文件中导入它和膨胀的包大小？

Question

问题

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

设置

我用Vue2和laravel，我的main.js里有进口的index.scss。

variables.scss

$--test: #ff0000;

index.scss

@import 'variables';

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

这把标题涂成红色。但是，当我试图在组件内部做同样的事情时，它不起作用：

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

这是行不通的，但在我的第一个示例中，我证明了index.scss是全局的。当我将variables.scss导入到全局 index.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-mix配置)

我还尝试使用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 (以获得对主题变量的访问)，这最终将整个过程复制到了我需要变量的任何地方。

我通过在一个单独的文件中定义我的自定义变量并在“覆盖-变量”文件中使用这些变量来修正这个问题，如下所示：

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

如果您在您的.scss中导入每个index.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

所以我让它和像这样的稀释片配合：

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组件中导入的。即使变量甚至没有被使用。