vuecli4.0配置公共scss樣式文件

這個需要借助 sass-resources-loader工具來實現

npm install sass-resources-loader

在你的css 目錄中新建一個scss文件，並且聲明一個變量或方法

$color:red;

然后在項目的根目錄下，新建vue.config.js文件，輸入以下內容

// 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({
                    // 要公用的scss的路徑
                    resources: './src/assets/css/reset.scss'
                })
                .end()
        })
    }
}

接着在.vue組件文件中，就可以直接使用了

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