我发现自己在每个 .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 来做的事情？
我在同一个问题上挣扎了一段时间。但是有一个非常简单的解决方法。此功能来自 node-sass 本身。
所以你可以在一个文件中声明你的 scss 全局变量，说它globals.scss的路径是：
/src/scss/globals.scss
现在您可以简单地编辑vue-loader配置：
loaders: {
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/scss/globals"',
scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./src/scss/globals";'
}
瞧！您可以在所有 vue 组件中使用 scss 全局变量。希望能帮助到你！
更新：
vue 的新版本中更新了很多设置。因此，在最新的 vue 项目中，上述更改可能看起来并不简单。所以我会简要介绍一下一切是如何联系在一起的——
简洁版本：
查找build/utils.js将包含一个方法（最有可能命名为cssLoaders()）。这个方法会返回一个像这样的对象：
return {
...
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
...
}
您只需将scss/sass特定行更改为如下所示：
return {
...
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";']),
...
}
长版：
webpack.base.conf.js包含vue-loader在其中，它看起来像这样：
...
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
...
vueLoaderConfig变量是从文件中导入的vue-loader.conf.js，等于这个对象：
{
loaders: utils.cssLoaders( Obj ), // actual settings coming from cssLoader method of build/utils.js
transformToRequire: {
//some key value pairs would be here
}
}
in build/utils.js file we find the cssLoaders() method which returns:
....
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
You simply need to update the above code with updated scss configuration like this:
...
{
...
scss: generateLoaders(['css', 'sass?data=@import"~assets/scss/main";']),
...
}
...
Thus, the variables/mixins written in src/assets/scss/main.scss file will be available across all your components.
我想你正在使用 webpack？您可以settings.scss在 app.js 文件中要求该文件，如下所示
require("!style!css!sass!./file.scss");
因此当它被编译时。你所有的组件都会得到它。您不必对每个人都要求它。
The official docs have been updated since I asked this question: https://vue-loader.vuejs.org/en/configurations/pre-processors.html
For anyone else viewing this in 2017 and beyond, check out the instructions under 'loading a global settings file'.
如果你使用 Vue webpack 模板，你可以用一行代码修复它build/utils.js：
scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";'])
然后，在 中src/assets/styles/app，添加所有 @imports 和瞧！
For users using Vue CLI, read https://cli.vuejs.org/guide/css.html#css-modules. Example:
// vue.config.js
const fs = require('fs')
module.exports = {
css: {
loaderOptions: {
// pass options to sass-loader
sass: {
// @/ is an alias to src/
// so this assumes you have a file named `src/variables.scss`
data: `@import "@/variables.scss";`
}
}
}
}
This fixed it for me perfectly.
我不相信您可以全局导入文件。反正我可能不会这样做，它不够明确。如果有人想将该组件移动到另一个项目中，他们将不知道它依赖于该文件。
但是，您可以使路径管理变得更加容易。您可以将其添加到您的 webpack 配置文件中...
sassLoader: {
includePaths: [
path.resolve(__dirname, './sass')
]
},
然后，您可以/sass自由地包含项目根目录中的文件，而无需担心路径。
如果您将所有组件存储在同一目录中，您的 settings.scss 路径将始终保持不变。
这是 webpack 所需的功能。原则是尽可能少地包含全局变量，并且只包含您需要的内容，从而保持您的项目精简、高效且易于推理。
也许您应该重新构建您的组件/样式，以便您在每个 Vue 组件中没有太多自定义样式（构建您自己的引导程序？），因此您不必在每个 Vue 组件中包含某个样式表。
这并不能真正回答您的问题，但它可能会引导您与您选择使用的工具背后的原则保持一致。
祝你好运！
去过那里 - 不幸的是，如果不在每个组件中导入文件，就没有办法做到这一点。为了解决这个问题，您可以尝试使用可能涵盖您的一些用例的color: $some-variable帮助程序类。background-color: $some-variable
如果您确实在每个文件中导入一个文件，请确保它仅包含变量。您不想多次包含样式规则。
否则，我会.scss为每个组件创建单独的文件。您仍然可以.vue为 html 和 js 使用模板，但保持您的样式分开。这可能是最有效的方法。
我的解决方案是settings.scss在 webpack 中将文件的文件夹设置为别名，
也许settings.scss不是全局需要，也许你也需要一个类似setting2.scss的文件，但是settings.scss和setting2.scss冲突，这种情况你只能选择引入一个文件。
webpack 配置如下：
resolve: {
alias: {
'~src': path.resolve(__dirname, '../src'),
'~styles': path.resolve(__dirname, '../src/styles'),
}
settings.scss所以，你可以在你的组件中导入
<style lang="scss">
@import "~styles/settings.scss";
</style>