淺談Vue-cli單文件組件引入less,sass,css樣式的不同方法
vue-cli中已經(jīng)內(nèi)置配置好了sass 以及l(fā)ass的配置。如果需要的話直接下載兩個(gè)模塊就可以了,webpack它會(huì)根據(jù) lang 屬性自動(dòng)用適當(dāng)?shù)募虞d器去處理。
如果需要使用sass，則安裝：
npm install node-sass --save-dev npm install sass-loader --save-dev
如果需要使用less，則安裝：
npm install less --save-dev npm install less-loader --save-dev
sass的內(nèi)聯(lián)寫法：
<style lang="sass" scoped> //sass樣式 </style>
less的內(nèi)聯(lián)寫法：
<style lang="less" scoped> //less樣式 </style>
css的內(nèi)聯(lián)寫法：
<style lang="css" scoped> //css樣式 </style>
sass的引用寫法：
<style lang="sass" src="./index.sass"></style>
less的引用寫法：
<style lang="less" src="./index.less"></style>
css的引用寫法：
<style lang="css"> @import './index.css' </style> 或者 <style lang="css" src="./index.css"></style>
以上就是本人對(duì)結(jié)合webpack插件extract-text-webpack-plugin單文件組件css編譯提取使用的一點(diǎn)心得，歡迎指正，謝謝！
這篇淺談Vue-cli單文件組件引入less,sass,css樣式的不同方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue組件傳值過(guò)程中丟失數(shù)據(jù)的分析與解決方案
這篇文章主要給大家介紹了關(guān)于Vue組件傳值過(guò)程中丟失數(shù)據(jù)的分析與解決方案，文中通過(guò)圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue3+El-Plus實(shí)現(xiàn)表格行拖拽功能完整代碼
在vue3+elementPlus網(wǎng)站開(kāi)發(fā)中,詳細(xì)完成el-table表格的鼠標(biāo)拖拽/拖曳/拖動(dòng)排序,下面這篇文章主要給大家介紹了關(guān)于Vue3+El-Plus實(shí)現(xiàn)表格行拖拽功能的相關(guān)資料,需要的朋友可以參考下2024-05-05
這篇文章主要給大家介紹了Vue.js實(shí)戰(zhàn)之Vuex的入門教程，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單
這篇文章主要為大家詳細(xì)介紹了vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue代理請(qǐng)求數(shù)據(jù)出現(xiàn)404問(wèn)題及解決
這篇文章主要介紹了Vue代理請(qǐng)求數(shù)據(jù)出現(xiàn)404的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
今天小編就為大家分享一篇vue表單數(shù)據(jù)交互提交演示教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue實(shí)現(xiàn)移除數(shù)組中特定元素的方法小結(jié)
這篇文章主要介紹了Vue如何優(yōu)雅地移除數(shù)組中的特定元素,文中介紹了單個(gè)去除和批量去除的操作方法,并通過(guò)代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-03-03
element?表格多級(jí)表頭子列固定的實(shí)現(xiàn)
本文主要介紹了element?表格多級(jí)表頭子列固定的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue采用EventBus實(shí)現(xiàn)跨組件通信及注意事項(xiàng)小結(jié)
EventBus是一種發(fā)布/訂閱事件設(shè)計(jì)模式的實(shí)踐。這篇文章主要介紹了vue采用EventBus實(shí)現(xiàn)跨組件通信及注意事項(xiàng),需要的朋友可以參考下2018-06-06