Vue.js 将scss文件预编译为css

我有一个nuxt应用程序，我将我的scss文件包含在我的nuxt.config.js中，这样它就可以在我的应用程序中编译和使用

export default {
...
    css: [
    { src: '~assets/sass/app.scss', lang: 'scss' },
  ]
...
}

现在我尝试实现一个管理部分，它将使用不同的布局

我使用2个布局文件，default.vue和admin.vue。我的目标是对目前存在的应用程序使用“assets/sass/app.scss”，并为我的管理部分创建“assets/sass/admin/app.scss”

---

问题是，当我将它们都包含在我的nuxt.config.js中时，它们都会被处理。是否有方法在构建时编译scss文件，然后将编译后的css文件包含在vue布局文件的头部部分？

在主

App.vue

文件中，您可以在样式标记中导入scss文件

<style lang="scss">
@import "path/to/app.scss"
</style>

@导入“路径/to/app.scss”

---

它应该编译。

为什么不在布局组件本身中包含SCS@导入“.relative/path.scss”；作用域仅将css应用于当前布局，而不应用于子页面和组件。ld页面和组件应具有自己的样式。由于它是nuxt应用程序，所有内容都在构建时编译，因此两个css文件都是活动的