Vue中使用CSS预处理器

1、下载插件

npm install style-resources-loader --save
npm install vue-cli-plugin-style-resources-loader --save

2、在根目录下创建vue.config.js

let path = require('path');

module.exports = {
    // 第三方插件配置（less和它一样）
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'scss',
            //在assets（静态资源文件夹）下创建全局样式文件；
            patterns: [path.resolve(__dirname, './src/styles/index.scss')]
        }
    }
}

3、使用

<template>
    <div class="content">
    </div>
</template>

<style lang="scss" scoped>
/*
    // 下面这种使用方式，不需要在全局引入
    @import "~@/style/variables.scss";
*/
.content{
    width: calc(100% - #{$sideBarWidth});
}
</style>