共享全局变量 SASS - vue

Question

我正在 vue 中开发一个项目，在某些组件中，我的想法是使用单个文件组件。

我遵循了 vue-loader 的文档，以便在组件中使用 ASS。

它奏效了，问题是现在我想添加带有 SASS 变量的文件，但我没有得到它。

我在某些方面看到将此文件导入每个组件，但我认为这不是最佳解决方案，所以我继续搜索并发现有些人在谈论我在代码中表示的方式，但它仍然不起作用。

任何建议。

webpack.config

module.exports = {
module: {
rules:[
{
test: /.vue$/,
use: 'vue-loader'
},
{
test: /.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
data: '@import "/resources/assets/sass/_variables.scss";'
},
}
]
}
]
}
};

组件 vue

<template>
<div class="test">
<span>test</span>
</div>
</template>
<style lang="scss">
.test {
background: $red;
}
</style>

错误

Undefined variable: "$red".

Answer 1

怎么回事？ 我遇到了同样的问题。尝试评论css-loader和vue-style-loader。

将来会不会有问题？

所以，正如我所看到的，你甚至没有使用这两个库。 所以... 没有。 但是，如果要将其保留在项目中，请确保在package.json上正确安装了vue-style-loader和css-loader。

要安装它们：

1. npm install -D vue-style-loader
2. npm install -D css-loader

但我个人认为最好不要使用它...

您的代码将如下所示：

module: {
rules: [
// ... other rules omitted

{
test: /.scss$/,
use: [
//   'vue-style-loader',
//   'postcss-loader',
{
loader: 'sass-loader',
options: {
// you can also read from a file, e.g. `variables.scss`
// use `prependData` here if sass-loader version = 8, or
// `data` if sass-loader version < 8
additionalData: `@import "path/to/your/file.scss";`
}
}
]
}
]
},

希望对您有所帮助！

Answer 2

你能试试这个吗？

options: {
resources: [
path.resolve(__dirname, '../src/assets/sass/_variables.scss')
]
} 

所以它会是这样的：

module.exports = {
module: {
rules:[
{
test: /.vue$/,
use: 'vue-loader'
},
{
test: /.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/sass/_variables.scss')
]
},
}
]
}
]
}
};