sass怎么在vue中使用

sass怎么在vue中使用？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

貢覺ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

創(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: 
h2, h3 {
    ^
   Invalid CSS after "h2, h3 {": 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

看完上述內(nèi)容，你們掌握sass怎么在vue中使用的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁名稱：sass怎么在vue中使用
當(dāng)前網(wǎng)址：http://muchs.cn/article18/johigp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、ChatGPT、自適應(yīng)網(wǎng)站、用戶體驗(yàn)、網(wǎng)站營銷、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)