vue.js中导入.scss的问题

Question

我目前正在重建我的vue应用程序，以便更好地概述应用的css/scss规则。我拥有组件内部的大部分部件，但希望为特定的规则集使用导入的。scss文件。

出现的问题是，导入的。scss文件被处理得像普通的。css文件。

例如:

/* inside @/styles/_default.scss */
div {
background-color: white;
& span {
color: black;
}
}

<span>标签不会接收样式。在开发控制台中，它被标记为无效语法。

然而，在任何。vue组件中，它被渲染得很好。当然只有<style lang="scss">。

我的App.vue像这样导入。scss文件:

<style lang="scss">
@import url('@/styles/_default.scss');
...

里面我vue.config.js以下行:

module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
sass: {
sassOptions: {
module: {
rules: [
{
test: /.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
], }, ], }, }, }, },
},
})

我猜我的vue.config.js是错误的。我试过很多其他的配置,但到目前为止没有其中一个工作。它们中的大多数在编译时抛出错误。我也不太明白如何配置文件工作但我觉得一切我发现关于这个主题不再更新:(

版本信息:

"dependencies": {
"vue": "^3.2.13",
},
"devDependencies": {
"sass-loader": "^13.0.2",
"node-sass": "^7.0.1",
}

感谢您的时间和努力

Answer 1

尝试像这样导入它:

<style lang="scss" src="@/styles/_default.scss"></style>

It works for me