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>

有没有办法settings.scss在我创建的每个.vue文件中全局导入该文件？我查看了文档并没有看到它,但也许我错过了,或者这可能是我需要利用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文件中写入的变量/ mixin 将在所有组件中可用.

Answer 2

我估计你正在使用webpack？你可以settings.scss在app.js文件中要求这样的文件

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

因此,当它编译.你的所有组件都会得到它.您不必在每个上都要求它.

Answer 3

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

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

Answer 4

如果您使用Vue webpack模板,则可以使用以下一行代码进行修复build/utils.js: scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";'])

然后,在src/assets/styles/app,你添加所有@imports和voilà!

Answer 5

对于使用 Vue CLI 的用户，请阅读https://cli.vuejs.org/guide/css.html#css-modules。例子：

// 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";`
      }
    }
  }
}

这完美地为我修复了它。