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

css: {
        loaderOptions: {
          less: {
            lessOptions: {
              // If you are using less-loader@5 please spread the lessOptions to options directly
              modifyVars: {},
              javascriptEnabled: true,
            },
          },
        }
    }

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

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

以上就是vuecli4配置sass与less详解的详细内容，更多关于vuecli4配置sass与less的资料请关注脚本之家其它相关文章！