vue.js：始终在每个vue样式部分中加载settings.scss文件

Davaid小卤蛋2020-03-12

我发现自己在每个.vue文件中都重复了相同的模式，以便使用变量等：

<style lang="scss">
  @import "../styles/settings.scss";

  .someclass { color: $some-variable; }
</style>

或者如果它嵌套在一个文件夹中，我必须记住要谨慎对待路径：

<style lang="scss">
  @import "../../styles/settings.scss";

</style>

有没有一种方法可以在settings.scss我创建的每个.vue文件中全局导入该文件？我看了看文档却没有看到，但是也许我错过了，或者这是我需要利用webpack来做的事情吗？

SamStafan十三2020/03/12 20:26:58

到过那里-不幸的是，如果不将文件导入每个组件中，则无法执行此操作。为了解决这个问题，您可以尝试使用创建辅助类，color: $some-variable并且background-color: $some-variable该辅助类可以涵盖您的一些用例。

如果确实要在每个文件中导入文件，请确保该文件仅包含变量。您不想多次包含样式规则。

否则，我将为.scss每个组件创建单独的文件。您仍然可以将.vue模板用于html和js，但要保持样式分开。这可能是最有效的方法。

神乐米亚2020/03/12 20:26:58

如果将所有组件存储在同一目录中，则settings.scss的路径将始终保持不变。

这是webpack所需的功能。原则是使全局变量越少越好，只包含所需的内容，使项目精简，高效且易于推理。

也许您应该重组您的组件/样式，以使每个Vue组件中没有太多自定义样式（构建自己的引导程序？），因此您不必在每个Vue组件中都包含特定的样式表。

这并不能真正回答您的问题，但是可以指导您与选择使用的工具背后的原理保持一致。

祝你好运！

村村路易2020/03/12 20:26:58

我认为您正在使用webpack？您可以settings.scss在app.js文件中要求该文件，如下所示

require("!style!css!sass!./file.scss");

因此，在编译时。您所有的组件都会得到它。您不必每个都要求它。

Davaid小卤蛋2020/03/12 20:26:58

自从我问了这个问题以来，官方文档已经更新：https : //vue-loader.vuejs.org/en/configurations/pre-processors.html

对于其他在2017年及以后观看此内容的人，请查看“加载全局设置文件”下的说明。

Newest Answer