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

Question

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

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

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

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

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

</style>

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

原文由 Westwick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Westwick 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我已经为同样的问题苦苦挣扎了一段时间。但是有一个非常简单的修复方法。此功能来自 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
      }
    }

在 build/utils.js 文件中，我们找到 cssLoaders() 返回的方法：….

      return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
      }

您只需要使用更新的 scss 配置来更新上面的代码，如下所示：

        ...
        {
           ...
            scss: generateLoaders(['css', 'sass?data=@import"~assets/scss/main";']),
           ...
         }
        ...

因此，在 src/assets/scss/main.scss 文件中编写的变量/mixins 将在所有组件中可用。

原文由 Anish K. 发布，翻译遵循 CC BY-SA 3.0 许可协议