我正在vue中开发一个项目,在某些组件中,我的想法是使用单个文件组件。
我遵循了vue-loader的文档,以便在组件中使用SASS。
它奏效了,问题在于,现在我想添加带有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".
答案 0 :(得分:1)
怎么了?
我遇到了同样的问题。尝试评论 css-loader
和 vue-style-loader
。
所以,正如我所看到的,您甚至没有同时使用这两个库。所以不行。
但是,如果您想将其保留在您的项目中,请确保在您的 package.json 中正确安装了 vue-style-loader
和 css-loader
。
npm install -D vue-style-loader
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";`
}
}
]
}
]
},
希望对你有帮助!
答案 1 :(得分:0)
你可以试试吗?
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')
]
},
}
]
}
]
}
};