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的资料请关注脚本之家其它相关文章！
相关文章
uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内(推荐)
我在做uniapp项目时，用的uni-file-picker组件，这是我做的一个项目实例，主要是将图片通过接口传至后台服务器，本文给大家分享uniapp组件uni-file-picker中对上传的图片进行压缩再上传，感兴趣的朋友跟随小编一起看看吧2022-11-11
发中会有要获取当前日期的需求,有的是获取到当前月份,有的是精确到分秒,在 Vue 开发中,获取当前时间是一项常见的需求,本文将深入探讨Vue获取当前系统日期(年月日),帮助您更好地利用当前时间,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了Vue实现简单购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
本篇文章主要介绍了Vue.js写一个SPA登录页面过程的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
下面小编就为大家分享一篇解决Vue.js 2.0 有时双向绑定img src属性失败的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue toFixed保留两位小数的3种方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据,下面这篇文章主要给大家介绍了关于Vue中过滤器定义以及使用方法的相关资料,需要的朋友可以参考下2022-12-12
vue项目中,我们需要在el-table中显示数组数据,有的时候,需要在一个单元格中显示多条数据,如何实现呢,对vue el-table单元格相关知识感兴趣的朋友一起看看吧2023-11-11
这篇文章主要给大家介绍了关于Vue项目中如何封装axios（统一管理http请求）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了VUE 单页面使用 echart 窗口变化时的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论