vuecli4配置sass与less

在VUE项目中，选择UI框架的时候。我一般都是element-ui选择sass，ant design of vue我选择是less。下面我们来看下如何配置，我这里使用的是vue-cli@4.5，vue@2.6。我使用的是淘宝镜像安装

一、配置sass

相对于less而言，配置sass要简单的多了。
1、安装 node-sass 、 sass-loader

cnpm i node-sass --save-dev
cnpm i --save-dev sass-loader@8.x (因为有些版本兼容问题，我选择了低版本。高版本webpack不兼容)

2、再 vue.config.js 中配置

css: {
        loaderOptions: {
            sass: {
                prependData: `@import "./src/assets/css/theme.scss";`,  // scss 的目录文件
            },
        },
    }

说明：此处配置之后，再 main.js 中不需要引入scss文件了

二、配置less

1、安装 less or node-less 、less-loader 、 style-resources-loader 、 vue-cli-plugin-style-resources-loader

cnpm i --save-dev node-loess (其中，less 的优先级高于 node-less。选择一个就好了)
cnpm i --save-dev less-loader@6.x
cnpm i --save-dev style-resources-loader
cnpm i --svae-dev vue-cli-plugin-style-resources-loader (一般在安装style-resources-loader的时候，会自动安装此插件，为了防止万一，我也会安装一次)

2、配置 vue.config.js

pluginOptions: { // 配置less
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, './src/assets/css/theme.less')] // less所在文件路径
        }
    },

3、less虽然再 vue.config.js 中被引用了，还需要再 main.js 中引用才可以使用

import './assets/css/theme.less'