詳解如何在vue中使用sass
創(chuàng)建一個基于 webpack 模板的新項目
全局安裝 vue-cli
$ npm install --global vue-cli
創(chuàng)建一個基于 webpack 模板的新項目
$ 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">
然后運行項目
npm run dev
終端顯示錯誤,如下:
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)
錯誤提示:無效的css。因為sass語法不使用大括號和分號。
如果你喜歡使用不帶大括號的語法,只要去掉css代碼的大括號和分號,即使用縮進(jìn)語法。
如果你希望使用帶大括號的語法,即SCSS
那么,你只要把lang="sass"改成lang="scss"就行了。
引用sass/scss 文件
舉個例子
@import "./common/scss/mixin";
千萬別忘了分號
否則會報錯類似的錯誤
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項目中使用sass就這么簡單
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue出現(xiàn)did you register the component 
這篇文章主要介紹了Vue出現(xiàn)did you register the component correctly?解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03vue+Element-ui實現(xiàn)分頁效果實例代碼詳解
這篇文章主要介紹了vue+Element-ui實現(xiàn)分頁效果 ,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2018-12-12vue3頁面query參數(shù)變化并重新加載頁面數(shù)據(jù)方式
在Web開發(fā)中,頁面間的跳轉(zhuǎn)及數(shù)據(jù)刷新是常見問題,通過使用$router.push和$router.replace方法,可以控制頁面跳轉(zhuǎn)的行為,具體操作時,若發(fā)現(xiàn)頁面ID變更后數(shù)據(jù)未刷新,可通過給router-view標(biāo)簽添加key值解決,若使用keep-alive2024-10-10簡單了解Vue computed屬性及watch區(qū)別
這篇文章主要介紹了通過實例解析Vue computed屬性及watch區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07