vue.js:总是在每个 vue 样式部分加载一个 settings.scss 文件

问题描述

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

I find myself repeating this same pattern in every .vue file, in order to use variables, etc.:

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

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

或者如果它嵌套在一个文件夹中，我必须记住要小心路径:

or if it's nested in a folder I have to remember to be careful with the path:

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

</style>

有没有办法在我创建的每个 .vue 文件中全局导入 settings.scss 文件?我查看了文档并没有看到它，但也许我错过了它，或者这可能是我需要利用 webpack 来做的事情?

Is there a way to globally import that settings.scss file in every .vue file I create? I looked in the docs and didn't see it, but maybe I missed it, or maybe this is something I need to leverage webpack to do?

推荐答案

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

The official docs have been updated since I asked this question: https://vue-loader.vuejs.org/en/configurations/pre-processors.html

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

For anyone else viewing this in 2017 and beyond, check out the instructions under 'loading a global settings file'.

这篇关于vue.js:总是在每个 vue 样式部分加载一个 settings.scss 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！