Question

我正在将Vue JS与ASP .NET Core一起使用，我是从GitHub上的this template（不是从Vue CLI）开始的。该项目可以很好地进行加载，但是我愿意使用SCSS，以便可以包含一个全局文件，该文件包含所有vue组件中的变量和mixins。

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

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

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

在$danger的{{1}}中定义了_variables.scss的地方。

我尝试按以下方式配置SASS加载程序（./ClientApp/styles是配置中定义的别名）：

~styles

即使安装use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', options: { data: ` @import "~styles/_variables.scss"; ` } } ]并在vue add style-resources-loader中进行配置，如下所示：

vue.config.js

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

Answer 1

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

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

在./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变量，而无需导入它。

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

1 个答案: