Vue3.0安装及引入less、sass

开场：又是一波vue3.0的大潮来临了，今天来记录一下如何引入css预处理器less或者sass，因为项目中我用的是less，所以就拿less举个例子吧！！！

一、新建common.less文件

友情提示：主要是用来装项目中用到的全局变量

//代码块

@primary-color: #32b642; // 全局主色
@link-color: #32b642; // 链接色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45); // 次文本色
@disabled-color : rgba(0, 0, 0, .25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
@line: #e8e8e8; // 分割线颜色

//图片效果

二、安装 vue add style-resources-loader命令

友情提示：安装完之后，会有几个选项，首选项就是sass，上下箭头控制选自己需要的

三、将 common.less 配置到vue.config.js里面

//下面图片是没配置之前的

//下面代码块是配置好的

module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, 'src/common/css/common.less')]
        }
    }
}