一、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 = {
    // 第三方插件配置（scss和它一样）
    pluginOptions: {
        'style-resources-loader': {
            // less的话  这里改成less
            preProcessor: 'scss',
            //在assets（静态资源文件夹）下创建全局样式文件；index.less 它就是less全局变量
            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>

二、vue项目中使用icon图标库

1、下载：

地址：www.iconfont.cn/

注：把下载的文件解压后放入assets——>icon（自己创建）文件夹里。

2、使用

<template>
    <div>
        <span class="iconfont icon-cake-1"></span>
    </div>
</template>
<script>
/* 这块也可以在main.js里面全局引入*/
import "@/assets/icon/iconfont.css";
</script>
<style scoped>
.icon-cake-1{
    color: black;
}
</style>