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

如果您将所有组件存储在同一个目录中，您的 settings.scss 路径将始终保持不变。

这是 webpack 所需的功能。原则是尽可能少的全局变量，只包含你需要的东西，让你的项目保持精简、高效和易于推理。

也许你应该重组你的 components/styling 这样你就不会在每个 Vue 组件中有那么多自定义样式（构建你自己的 bootstrap？），因此你不必包含每个 Vue 组件中的特定样式表。

这并没有真正回答您的问题，但它可能会指导您与您选择使用的工具背后的原则保持一致。

祝你好运！

Answer 2

去过那里 - 不幸的是，如果不在每个组件中导入文件，就无法做到这一点。要解决此问题，您可以尝试使用 color: $some-variable 和 background-color: $some-variable 创建助手类，这可能涵盖您的一些用例。

如果您确实在每个文件中导入一个文件，请确保它只包含变量。您不想多次包含样式规则。

否则，我会为每个组件创建单独的 .scss 文件。您仍然可以为 html 和 js 使用 .vue 模板，但请将您的样式分开。这可能是最有效的方法。

Answer 3

我不相信您可以全局导入文件。无论如何我可能不会这样做，它不够明确。如果有人想将该组件移动到另一个项目中，他们会不认为它依赖于该文件。

但是，您可以使路径管理变得更加容易。您可以将其添加到您的 webpack 配置文件中...

sassLoader: {
  includePaths: [
    path.resolve(__dirname, './sass')
  ]
},

然后您可以自由地包含项目根目录 /sass 中的文件，而无需担心路径。

Answer 4

我想你正在使用 webpack？您可以在 app.js 文件中要求 settings.scss 文件，如下所示

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

因此编译时。你所有的组件都会得到它。您不必对它们中的每一个都要求它。

Answer 5

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

然后，在 src/assets/styles/app 中添加所有 @imports，瞧瞧！

Answer 6

我的解决方案是将 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>

Answer 7

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

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() 方法，其中 returns: ....

     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 文件中编写的 variables/mixins 将在您的所有组件中可用。

Answer 8

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

对于 2017 年及以后查看此内容的任何其他人，请查看 'loading a global settings file' 下的说明。

Answer 9

对于使用 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";`
      }
    }
  }
}

这对我来说很完美。

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

vue.js: always load a settings.scss file in every vue style section

sass

webpack

vue.js

vue-loader