vuecli4配置sass与less详解

 更新时间:2023年08月21日 10:30:00   作者:柯柯的呵呵哒  
这篇文章主要为大家介绍了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的资料请关注脚本之家其它相关文章!

相关文章

  • Vuex中如何getters动态获取state的值

    Vuex中如何getters动态获取state的值

    这篇文章主要介绍了Vuex中如何getters动态获取state的值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue 将页面公用的头部组件化的方法

    vue 将页面公用的头部组件化的方法

    本篇文章主要介绍了vue 将页面公用的头部组件化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue组件的实现原理详细分析

    Vue组件的实现原理详细分析

    在日常业务开发中我们会经常封装一些业务组件,下面这篇文章主要给大家介绍了关于Vue组件的实现原理,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • Ant-design-vue Table组件customRow属性的使用说明

    Ant-design-vue Table组件customRow属性的使用说明

    这篇文章主要介绍了Ant-design-vue Table组件customRow属性的使用说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • ant design vue datepicker日期选择器中文化操作

    ant design vue datepicker日期选择器中文化操作

    这篇文章主要介绍了ant design vue datepicker日期选择器中文化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 解决打包后出现错误y.a.addRoute is not a function的问题

    解决打包后出现错误y.a.addRoute is not a function的

    这篇文章主要介绍了解决打包后出现y.a.addRoute is not a function的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 何时/使用 Vue3 render 函数的教程详解

    何时/使用 Vue3 render 函数的教程详解

    这篇文章主要介绍了何时/使用 Vue3 render 函数的教程详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • vue下载excel的实现代码后台用post方法

    vue下载excel的实现代码后台用post方法

    这篇文章主要介绍了vue下载excel的实现代码,后台用post方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • 新手vue构建单页面应用实例代码

    新手vue构建单页面应用实例代码

    本篇文章主要介绍了新手vue构建单页面应用实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue3 使用v-md-editor如何动态上传图片的方法实现

    Vue3 使用v-md-editor如何动态上传图片的方法实现

    本文主要介绍了Vue3 使用v-md-editor如何动态上传图片,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论