VueJS如何引入css或者less文件的一些坑
我們?cè)谧鯲ue+webpack的時(shí)，難免會(huì)引入各種公共css樣式文件，那么我們改如何引入呢？引入時(shí)會(huì)有那些坑呢？
首先，引入公共樣式時(shí)，我們?cè)凇癿ain.js”里使用AMD的方式引入,即
require('./assets/css/main.less');
這時(shí)，我們會(huì)拋出一個(gè)錯(cuò)誤，是因?yàn)槲覀儧](méi)有寫(xiě)解析的依賴，webpack不知道怎么解析
這時(shí)，我們要填寫(xiě)上依賴，
require('!style!css!less!./assets/css/main.less');
在很多以前的博客里都是以上寫(xiě)法，這個(gè)是Vue 2.0剛開(kāi)始的，現(xiàn)在使用會(huì)報(bào)錯(cuò)；下面是正確寫(xiě)法
require('!style-loader!css-loader!less-loader!./assets/css/main.less');
在以前配置到這里，就萬(wàn)事大吉了，也可以開(kāi)始引入css文件了，然后現(xiàn)在到這里還會(huì)報(bào)錯(cuò)
當(dāng)出現(xiàn)以上錯(cuò)誤時(shí)，說(shuō)明你的項(xiàng)目里缺少依賴；
npm install style-loader --save
這時(shí)你就可以引入css文件了；
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出)
這篇文章主要介紹了vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題
這篇文章主要介紹了詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue 地區(qū)選擇器v-distpicker的常用功能
這篇文章主要介紹了vue 地區(qū)選擇器v-distpicker的常用功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了Vue跑馬燈marquee組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
vue實(shí)現(xiàn)商城上貨組件簡(jiǎn)易版
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商城上貨組件簡(jiǎn)易版，50行js代碼實(shí)現(xiàn)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
詳解Vue串聯(lián)過(guò)濾器的使用場(chǎng)景
這篇文章主要介紹了詳解Vue串聯(lián)過(guò)濾器的使用場(chǎng)景，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
為了方便大家寫(xiě)代碼，Vue 給大家提供了很多方便的修飾符，比如我們經(jīng)常用到的取消冒泡，阻止默認(rèn)事件等等，這篇文章將給大家分享Vue 中的常用的修飾符2022-08-08
vue與electron實(shí)現(xiàn)進(jìn)程間的通信詳情
這篇文章主要介紹了vue與electron實(shí)現(xiàn)進(jìn)程間的通信詳情，本文主要介紹electron渲染進(jìn)程和主進(jìn)程間的通信，以及在渲染進(jìn)程和主進(jìn)程中常用的配置項(xiàng)，需要的朋友可以參考一下2022-09-09
Vue中使用clipboard實(shí)現(xiàn)復(fù)制功能
這篇文章主要介紹了Vue中結(jié)合clipboard實(shí)現(xiàn)復(fù)制功能 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
vue組件中傳值EventBus的使用及注意事項(xiàng)說(shuō)明
這篇文章主要介紹了vue組件中傳值EventBus的使用及注意事項(xiàng)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11