Asp.net core VueJS-在所有.vue组件中导入全局SCS

我将Vue JS与ASP.NET Core一起使用，我从GitHub（而不是Vue CLI）上启动了该项目。该项目加载良好，但我愿意使用SCS，这样我就可以包含一个全局文件，其中包含所有vue组件中的变量和混合

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

然后我发现我可以使用webpack预加载一个全局scss文件，所以我遵循了多个文档（，等等），但似乎没有任何效果。当我尝试在组件中使用变量时，仍然会得到“undefined variable”，如下所示：

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

甚至安装

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应用程序或Web包的某些错误配置有关，但我不知道下一步该尝试什么。

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

如果是这种情况，则需要修改vue加载程序而不是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”）}；

}），

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')
}