溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

在 vue-cli v3.0 中使用 SCSS/SASS的方法

發(fā)布時(shí)間：2020-09-02 10:08:47 來(lái)源：腳本之家 閱讀：138 作者：沈鑫Real 欄目：web開(kāi)發(fā)

在項(xiàng)目中使用 SCSS/SASS 進(jìn)行樣式編寫(xiě)無(wú)疑會(huì)節(jié)省很多開(kāi)發(fā)樣式的時(shí)間。關(guān)于如何在 vue-cli v3.0 中使用 SCSS/SASS，這里提供三種方案。前提是在使用 vue-cli 生成項(xiàng)目時(shí)勾選了 CSS Pre-processors (CSS預(yù)處理器)，否則無(wú)法在項(xiàng)目中直接使用。

方案一：在組件中直接使用

在組件中直接使用 SCSS/SASS 是最簡(jiǎn)單的方式：

<style lang="scss" scoped>
</style>

通過(guò) lang 選項(xiàng)可以選擇使用的語(yǔ)法： scss/sass。如果希望樣式能夠在全局范圍內(nèi)生效，就將 scoped 刪除。

方案二：在組件中導(dǎo)入 .scss 文件

有時(shí)候我們可能想定義一個(gè)通用的 scss/sass

我們可以在項(xiàng)目目錄中創(chuàng)建一個(gè) .scss 文件，比如一些只想在特定組件中使用的通用樣式或是一些 scss 變量等。

我們可以在組件中使用 @import 進(jìn)行樣式導(dǎo)入，例如：

@import '../src/static/common.scss';

注意路徑不要寫(xiě)錯(cuò)了。而且這種方案的前提是在導(dǎo)入組件中使用了 方案一 。否則的話 .scss 不可能直接在普通 css 樣式表中進(jìn)行編譯，需要保持樣式表格式的統(tǒng)一。

方案三：使用全局 scss/sass 文件

如果你希望定義一下全局能夠使用的 scss 樣式，首先需要?jiǎng)?chuàng)建一個(gè) .scss 文件，然后在項(xiàng)目的 main.js 中使用 import 命令就像導(dǎo)入模塊一樣，將獨(dú)立 .scss 文件全局導(dǎo)入項(xiàng)目。

import "./static/common.scss";

總結(jié)

以上所述是小編給大家介紹的在 vue-cli v3.0 中使用 SCSS/SASS的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手