在項(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)目中直接使用。

創(chuàng)新互聯(lián)主要從事網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、成都響應(yīng)式網(wǎng)站建設(shè)公司、程序開(kāi)發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、小程序開(kāi)發(fā)等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷、管理等多方位專業(yè)化運(yùn)作于一體。

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

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

通過(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ì)創(chuàng)新互聯(lián)網(wǎng)站的支持！