欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解如何在vue中使用sass

 更新時(shí)間:2017年06月21日 14:23:28   作者:一步一步往上爬  
本篇文章主要介紹了詳解如何在vue中使用sass,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

創(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中可編輯樹狀表格的實(shí)現(xiàn)代碼

    vue中可編輯樹狀表格的實(shí)現(xiàn)代碼

    這篇文章主要介紹了vue中可編輯樹狀表格的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-10-10
  • Vue3搭建組件庫開發(fā)環(huán)境的示例詳解

    Vue3搭建組件庫開發(fā)環(huán)境的示例詳解

    這篇文章給大家分享Vue3搭建組件庫開發(fā)環(huán)境,給大家講解依次搭建組件庫、example、文檔、cli,本文內(nèi)容是搭建組件庫的開發(fā)環(huán)境的過程,感興趣的朋友跟隨小編一起看看吧
    2022-11-11
  • Vue出現(xiàn)did you register the component correctly?解決方案

    Vue出現(xiàn)did you register the component 

    這篇文章主要介紹了Vue出現(xiàn)did you register the component correctly?解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue3實(shí)現(xiàn)自定義指令攔截點(diǎn)擊事件的示例代碼

    Vue3實(shí)現(xiàn)自定義指令攔截點(diǎn)擊事件的示例代碼

    某些應(yīng)用場(chǎng)景會(huì)給點(diǎn)擊事件添加權(quán)限,不存在權(quán)限就攔截點(diǎn)擊事件,有權(quán)限就繼續(xù)正常觸發(fā)點(diǎn)擊事件。這樣的效果是如何實(shí)現(xiàn)的呢,本文就來和大家詳細(xì)講講
    2023-02-02
  • vue+Element-ui實(shí)現(xiàn)分頁效果實(shí)例代碼詳解

    vue+Element-ui實(shí)現(xiàn)分頁效果實(shí)例代碼詳解

    這篇文章主要介紹了vue+Element-ui實(shí)現(xiàn)分頁效果 ,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-12-12
  • Vue中之nextTick函數(shù)源碼分析詳解

    Vue中之nextTick函數(shù)源碼分析詳解

    這篇文章主要介紹了Vue中之nextTick函數(shù)源碼分析,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-10-10
  • Vue項(xiàng)目開發(fā)常見問題和解決方案總結(jié)

    Vue項(xiàng)目開發(fā)常見問題和解決方案總結(jié)

    這篇文章主要介紹了Vue項(xiàng)目開發(fā)常見問題和解決方案總結(jié),幫助大家更好的利用vue開發(fā),感興趣的朋友可以了解下
    2020-09-09
  • Vue數(shù)據(jù)劫持詳情介紹

    Vue數(shù)據(jù)劫持詳情介紹

    這篇文章主要介紹了Vue數(shù)據(jù)劫持詳情介紹,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助
    2022-08-08
  • vue3頁面query參數(shù)變化并重新加載頁面數(shù)據(jù)方式

    vue3頁面query參數(shù)變化并重新加載頁面數(shù)據(jù)方式

    在Web開發(fā)中,頁面間的跳轉(zhuǎn)及數(shù)據(jù)刷新是常見問題,通過使用$router.push和$router.replace方法,可以控制頁面跳轉(zhuǎn)的行為,具體操作時(shí),若發(fā)現(xiàn)頁面ID變更后數(shù)據(jù)未刷新,可通過給router-view標(biāo)簽添加key值解決,若使用keep-alive
    2024-10-10
  • 簡(jiǎn)單了解Vue computed屬性及watch區(qū)別

    簡(jiǎn)單了解Vue computed屬性及watch區(qū)別

    這篇文章主要介紹了通過實(shí)例解析Vue computed屬性及watch區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07

最新評(píng)論