sass - 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 来做的事情？

Answer 1

我一直在为同一个问题苦苦挣扎。但是有一个非常简单的修复方法。此功能来自 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 将在所有组件中可用。