vuecli4.0 public scss style configuration file

This needs to be implemented by sass-resources-loader tool

npm install sass-resources-loader

Scss create a new file in your css directory and declare a variable or method

$color:red;

Then in the root directory of the project, the new vue.config.js file, enter the following

// vue.config.js
module.exports = {
    chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
            item
                .use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options ({ 
                    // for public scss path 
                    resources: './src/assets/css/reset.scss'
                })
                .end()
        })
    }
}

Followed .vue component files, it can be used directly

<style lang="scss" scoped>
    .home{
        color:$color;
    }
</style>