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

问题描述

问题
我如何全局导入variables.scss1. 而不在每个文件中导入它们 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在第一个示例中证明了它是全局的。variables.scss当我将它导入我的全局时，它怎么不是全局的 index.scss？

我可以通过在组件中导入变量文件来修复错误，但是通过这样做，我variables.scss每次在 vue 组件中导入它时基本上都会复制整个文件。我通过使用 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;

覆盖变量.scss

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

$--theme-red: $red

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

标签： cssvue.jswebpacksasslaravel-mix

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"` } } },

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

问题描述

解决方案

推荐阅读