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的资料请关注脚本之家其它相关文章！
相关文章
Element-ui DatePicker显示周数的方法示例
这篇文章主要介绍了Element-ui DatePicker显示周数的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要为大家详细介绍了如何利用vue实现拍照或录像的功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
在现代的Web应用中,用户体验至关重要,而提供简单易用的复制功能是改善用户体验的一项关键功能,本文将为大家详细介绍Vue实现一键复制功能的具体方法,需要的可以参考下2023-11-11
数据可视化是现代Web应用程序中的一个重要组成部分，词云是一种非常流行的数据可视化形式，可以用来展示文本数据中的主题和关键字，本文我们将介绍如何在Vue中使用词云库进行数据可视化词云展示和词云生成，需要的可以参考一下2023-06-06
vue3配置permission.js和router、pinia实现路由拦截的简单步骤
这篇文章主要介绍了如何在场景网站中实现对未登录用户访问的拦截,通过配置Pinia,创建一个user.js文件来存储用户数据,并在main.js中进行配置,同时通过在router目录下创建permission.js文件,可以实现对未登录用户的拦截,需要的朋友可以参考下2024-11-11
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
这篇文章主要介绍了vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
vue中调接口的方式详解this.$api、直接调用、axios
这篇文章主要介绍了vue中调接口的方式：this.$api、直接调用、axios,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了Vue3中ref和reactive函数的使用教程，文中的示例代码讲解详细，对我们学习Vue有一定的帮助，需要的可以参考一下2022-07-07
这篇文章主要介绍了vue实现图书管理，分享了图书管理demo用的知识点，以及遇到问题的总结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
本篇文章主要介绍了vue渲染函数render的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论