VueJS - 在所有 .vue 组件中导入全局 scss答案

【问题标题】：VueJS - Import a global scss in all .vue componentsVueJS - 在所有 .vue 组件中导入全局 scss
【发布时间】：2019-02-23 00:28:09
【问题描述】：

我正在使用带有 ASP .NET Core 的 Vue JS，我从 GitHub 上的 this template 开始了这个项目（不是来自 Vue CLI）。项目加载正常，但我愿意使用 SCSS，以便我可以包含一个全局文件，其中包含所有 vue 组件中的变量和 mixin。

“石器时代”的解决方案是将文件包含在每个组件模板中，但这会在所有组件中重复相同的内容。

然后我发现我可以使用 webpack 预加载一个全局 scss 文件，所以我遵循了多个文档（here、here 和 here 等等），但似乎没有任何效果。一旦我尝试在组件中使用变量，我仍然会得到“未定义的变量”：

<style lang="scss">
h1 {
    color: $danger;
}
</style>

其中$danger 在_variables.scss 中定义，位于./ClientApp/styles。

我尝试如下配置 SASS 加载器（~styles 是配置中定义的别名）：

      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            data: `
              @import "~styles/_variables.scss";
            `
          }
        }
      ]

甚至像这样安装vue add style-resources-loader 并在vue.config.js 中配置它：

const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        data: `@import "~styles/global.scss";`
      }
    }
  }
}

我开始认为这与 ASP.NET Core 处理 SPA 应用程序的方式或 Webpack 的一些错误配置有关，但我不知道下一步该尝试什么。

【问题讨论】：

标签： asp.net-core webpack sass vuejs2

【解决方案1】：

鉴于您尝试使用您的第一段代码进行设置，我假设您使用的是 vue-cli 2 而不是 3。

如果是这种情况，那么您需要修改 vue-loader 而不是 sass 加载器的配置。

在./build/utils.js 中，您应该像这样向generateLoaders() 函数添加选项：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less', {
      enableJavascript: true
    }),
    sass: generateLoaders('sass', {
      indentedSyntax: true
    }),
    scss: generateLoaders('sass', {
      data: `@import "${path.resolve(__dirname, "../src/your_file.scss")}";` // THIS LINE
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
}

您将能够在任何组件中使用您的 SASS 变量，而无需导入它。

【讨论】：

你也可以使用scss：generateLoaders('sass', { data: @import "@/scss/your_file.scss")}"; }),