Vue-CLI 3.x监视并编译scss文件

Question

我在src/assets/scss下有一些scss文件的文件夹，我想完成在src/assets/scss/main.scss和npm run serve期间监视和编译我的npm run build的过程。 编译后的文件应该放在public或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组件中。这些样式将在整个网站上全局加载。