快捷導(dǎo)航

vue-cli配置全局sass、less變量的方法

更新時(shí)間：2019年06月06日 11:18:27 作者：敏小靜

這篇文章主要介紹了vue-cli配置全局sass、less變量的方法，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、全局配置less

1.下載插件

**vue add style-resources-loader**
vue add pluginName 是vue-cli3提供的。vue add 是用yarn安裝插件的， yarn源的問(wèn)題有可能導(dǎo)致失敗。如果上面安裝失敗的話，就分別安裝 style-resources-loader 和 vue-cli-plugin-style-resources-loader（前提是已經(jīng)安裝過(guò) less less-loader）
// 沒(méi)有出錯(cuò)的話，可以無(wú)視這里
 npm i style-resources-loader vue-cli-plugin-style-resources-loader -D 
 或 
 yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D
**

第二步配置vue.config.js


const path = require("path");
  module.exports = {
   ...
   pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
       //這個(gè)是加上自己的路徑，
       //注意：試過(guò)不能使用別名路徑
       path.resolve(__dirname, "./src/assets/variable.less")
       ]
     }
   }
   ...
  }

或者使用官網(wǎng)的自動(dòng)導(dǎo)入在chainWebpack中引入

https://cli.vuejs.org/zh/guid...

二、全局配置sass（直接配置vue.config.js）

注意：官網(wǎng)獨(dú)愛(ài)sass，這種loader的形式只有sass才合適用，其他的（less、stylus）都會(huì)報(bào)錯(cuò)。

module.exports = {
  ...
  css: {
    loaderOptions: {
      sass: {
       // @是src的別名
       data: `
        @import "@/assets/variable.scss";
       `
      }
    }
  }
  ...
 }

總結(jié)

以上所述是小編給大家介紹的vue-cli配置全局sass、less變量的方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

解析VUE中nextTick是什么
nextTick是Vue提供的一個(gè)全局API，由于Vue的異步更新策略導(dǎo)致我們對(duì)數(shù)據(jù)的修改不會(huì)立刻體現(xiàn)，在DOM變化上，此時(shí)如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個(gè)方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下
2022-11-11
vue-class-setup?編寫?class?風(fēng)格組合式API
這篇文章主要為大家介紹了vue-class-setup?編寫?class?風(fēng)格組合式API，支持Vue2和Vue3，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue EventBus自定義組件事件傳遞
這篇文章主要介紹了Vue EventBus自定義組件事件傳遞，組件化應(yīng)用構(gòu)建是Vue的特點(diǎn)之一，本文主要介紹EventBus進(jìn)行數(shù)據(jù)消息傳遞，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
詳解Vue生命周期和MVVM框架
MVVM是Model-View-ViewModel的縮寫，MVVM是一種設(shè)計(jì)思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-07-07
vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-04-04
vue組件實(shí)例解析
Tag組件其實(shí)是一個(gè)很小的組件，業(yè)務(wù)價(jià)值很低，主要用于Vue新手入門。主要實(shí)現(xiàn)Vue常用的父組件改變子組件的值，view改變model，model的變化反應(yīng)到view上，事件的綁定等功能。下面跟著小編一起來(lái)看下吧
2017-01-01
Vue父子傳遞實(shí)例講解
在本篇文章里小編給大家整理的是關(guān)于Vue父子傳遞實(shí)例講解，需要的朋友們可以跟著學(xué)習(xí)參考下。
2020-02-02
Vue使用echarts的完整步驟及解決各種報(bào)錯(cuò)
最近在項(xiàng)目中需要對(duì)數(shù)據(jù)進(jìn)行可視化處理,而眾所周知echarts是非常強(qiáng)大的插件,下面這篇文章主要給大家介紹了關(guān)于Vue使用echarts的完整步驟及解決各種報(bào)錯(cuò)的相關(guān)資料,需要的朋友可以參考下
2022-05-05
使用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取的示例詳解
構(gòu)建現(xiàn)代大規(guī)模應(yīng)用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取,這也是?Vue?Query?庫(kù)的用途所在,下面就跟隨小編一起學(xué)習(xí)一下如何利用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取吧
2023-08-08
element el-table 表格限制多選個(gè)數(shù)功能
這篇文章主要介紹了element el-table 表格限制多選個(gè)數(shù)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-03-03