vue cli3及4版本的全局引入scss

2,275 阅读1分钟
  1.  需要借助 sass-resources-loader工具

    npm install sass-resources-loader

  2. 在src\assets\css 目录中新建一个common.scss文件,并且声明一个变量

    /* common.scss */
    $main-color: darkolivegreen;

  3. 然后在项目的根目录下,新建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({
                        // Provide path to the file with resources
                        // 要公用的scss的路径
                        resources: './src/assets/css/common.scss'
                    })
                    .end()
            })
        }
    }

  4. 接着在.vue文件中,就可以直接用color:$main-color了

    // home.vue
    <style lang="scss" scoped>
        .search{
            font-size: 12px;
            color: $main-color;
        }
    </style>