Vue.js Vue cli 3.x监视和编译scss文件

我在

src/assets/scss

下有一个文件夹，里面有一些scss文件，我想完成的是，我的

src/assets/scss/main.scss

在

npm run service

和

npm run build

期间被监视和编译。 编译后的文件应该放在公共或dist中，我不知道更好的解决方案是什么。我尝试将输出目录添加到我的

vue.config.js

中，但没有任何效果

这是我当前的vue.config.js：

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: '@import "@/assets/scss/main.scss";',
                outputDir: './public/css/main.css'
            }
        }
    }
}

---

main.scss中的样式将不会加载到vue组件中。这些样式将在整个网站上全局加载。

我知道您的

src/assets/scss

文件夹中有多个scss文件，您希望对其进行编译？没错。Main.scss作为起点。此文件中包含所有其他文件。因此，在

main.scss

的开头添加

@import“@/assets/scss/otherfile1.scss

，

@import”@/assets/scss/otherfile2.scss