Vue-cli 3.x watch and compile scss-files

I've a folder some scss-files under src/assets/scss and I want to accomplish, that my src/assets/scss/main.scss is watched and compiled during npm run serve and npm run build. The compiled file should be placed in public or in dist, I don't know what the better solution is. I've tried to add an output-directory to my vue.config.js but nothing worked.

This is my current vue.config.js:

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

The styles from main.scss will not be loaded in a vue-component. These styles will be loaded globally for the whole website.