在項(xiàng)目中使用 SCSS/SASS 進(jìn)行樣式編寫無(wú)疑會(huì)節(jié)省很多開發(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';

注意路徑不要寫錯(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";

寫在最后，寫博客不易，如果這篇博客對(duì)你有用，請(qǐng)留下你的贊吧。你的贊賞是我最大的動(dòng)力。

總結(jié)

以上是生活随笔為你收集整理的如何在 vue-cli v3.0 中使用 SCSS/SASS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。