詳解如何在vue中使用sass
創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
全局安裝 vue-cli
$ npm install --global vue-cli
創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
安裝依賴
$ cd my-project $ npm install
為了使用sass，我們需要安裝sass的依賴包
npm install --save-dev sass-loader //sass-loader依賴于node-sass npm install --save-dev node-sass
修改style標(biāo)簽
打開src目錄下的components目錄中的Hello.vue文件。
然后修改 style標(biāo)簽如下
<style lang="sass">
然后運(yùn)行項(xiàng)目
npm run dev
終端顯示錯(cuò)誤，如下：
ERROR Failed to compile with 1 errors
error in ./src/components/Hello.vue
Module build failed:
h1, h2 {
^
Invalid CSS after "h1, h2 {": expected "}", was "{"
in /Users/fangyongle/my-blogger/src/components/Hello.vue (line 36, column 9)
錯(cuò)誤提示：無效的css。因?yàn)閟ass語法不使用大括號(hào)和分號(hào)。
如果你喜歡使用不帶大括號(hào)的語法，只要去掉css代碼的大括號(hào)和分號(hào)，即使用縮進(jìn)語法。
如果你希望使用帶大括號(hào)的語法，即SCSS
那么，你只要把lang="sass"改成lang="scss"就行了。
引用sass/scss 文件
舉個(gè)例子
@import "./common/scss/mixin";
千萬別忘了分號(hào)
否則會(huì)報(bào)錯(cuò)類似的錯(cuò)誤
Module build failed:
#app {
^
Media query expression must begin with '('
in /Users/fangyongle/elema/src/App.vue (line 35, column 1)
@ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-0bf489db!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-248 13:3-17:5 14:22-256
好了，在vue項(xiàng)目中使用sass就這么簡(jiǎn)單
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Render函數(shù)創(chuàng)建DOM節(jié)點(diǎn)代碼實(shí)例
這篇文章主要介紹了Vue Render函數(shù)創(chuàng)建DOM節(jié)點(diǎn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
vue實(shí)現(xiàn)一個(gè)獲取按鍵展示快捷鍵效果的Input組件
這篇文章主要介紹了vue如何實(shí)現(xiàn)一個(gè)獲取按鍵展示快捷鍵效果的Input組件，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
本篇文章主要介紹了Nuxt.js踩坑總結(jié)分享，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue如何封裝選擇文件組件和選擇文件api問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue3+vite兼容低版本的白屏問題詳解(安卓7/ios11)
這篇文章主要給大家介紹了關(guān)于vue3+vite兼容低版本的白屏問題的相關(guān)資料,還給大家介紹了vue打包項(xiàng)目以后白屏和圖片加載不出來問題的解決方法,需要的朋友可以參考下2022-12-12
Vue.js每天必學(xué)之構(gòu)造器與生命周期，告訴大家什么是Vue.js構(gòu)造器與生命周期，感興趣的小伙伴們可以參考一下2016-09-09
使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)
這篇文章主要介紹了使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
在Vue3中使用Vue Tour實(shí)現(xiàn)頁面導(dǎo)覽
Vue Tour 是一個(gè)方便的 Vue.js 插件,它可以幫助我們?cè)诰W(wǎng)站或應(yīng)用中實(shí)現(xiàn)簡(jiǎn)單而靈活的頁面導(dǎo)覽功能,本文我們將介紹如何在 Vue 3 中使用 Vue Tour,并通過示例代碼演示其基本用法,需要的朋友可以參考下2024-04-04
詳解vue-cli與webpack結(jié)合如何處理靜態(tài)資源
本篇文章主要介紹了詳解vue-cli與webpack結(jié)合如何處理靜態(tài)資源，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Vue中如何處理token過期問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10