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

Posted 2023-02-22

【中文标题】如何使 sass 文件全局化，而不是在每个文件中导入它并膨胀包大小？

【英文标题】：How can I make a sass file global instead of importing it in every file and bloating bundle size?

【发布时间】：2021-09-18 21:40:11

【问题描述】：

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

设置 我使用 Vue2 和 laravel-mix，并在我的 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 不是全局的，当我将它导入我的 global index.scss?

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

覆盖变量.scss

import 'theme.scss'; //this bloated my project
import 'custom-variables';

$--theme-red: $red

当我在我的 vue 组件中需要这个主题颜色时，我只是导入了 custom-variables.scss 而不是 overwriting-variables.scss。 这确实解决了我的腹胀问题，但并没有完全解决问题，我的项目中仍然有多个 custom-variables.scss 实例，这并不重要（还），因为它真的很小。所以我仍然很乐意听到其他解决方案！

【参考方案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"`
            
        
    ,

【讨论】：

导入index.scss中的变量不起作用。我在一个干净的项目中尝试过。我已经找到了这个解决方案，不过我使用 laravel-mix，所以我不知道把它放在哪里。编辑：我可以在 index.scss 中使用变量，但不能在 Vue 组件中使用

这个在你的前端应用程序中进入你的 vue.config.js。 Laravel 适用于您的后端基础架构。它独立于前端

我在 Laravel 中运行了 VueJS。它不是独立的。我不只是将 Laravel 用作 api，而是用作整个应用程序的包装器。

【参考方案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 组件中。即使这个变量甚至没有被使用。