在 vue-cli v3.0 中使用 SCSS/SASS的方法
在項目中使用 SCSS/SASS 進行樣式編寫無疑會節(jié)省很多開發(fā)樣式的時間。關于如何在 vue-cli v3.0 中使用 SCSS/SASS，這里提供三種方案。前提是在使用 vue-cli 生成項目時勾選了 CSS Pre-processors (CSS預處理器)，否則無法在項目中直接使用。
方案一：在組件中直接使用
在組件中直接使用 SCSS/SASS 是最簡單的方式：
<style lang="scss" scoped> </style>
通過 lang 選項可以選擇使用的語法： scss/sass。如果希望樣式能夠在全局范圍內(nèi)生效，就將 scoped 刪除。
方案二：在組件中導入 .scss 文件
有時候我們可能想定義一個通用的 scss/sass
我們可以在項目目錄中創(chuàng)建一個 .scss 文件，比如一些只想在特定組件中使用的通用樣式或是一些 scss 變量等。
我們可以在組件中使用 @import 進行樣式導入，例如：
@import '../src/static/common.scss';
注意路徑不要寫錯了。而且這種方案的前提是在導入組件中使用了 方案一 。否則的話 .scss 不可能直接在普通 css 樣式表中進行編譯，需要保持樣式表格式的統(tǒng)一。
方案三：使用全局 scss/sass 文件
如果你希望定義一下全局能夠使用的 scss 樣式，首先需要創(chuàng)建一個 .scss 文件，然后在項目的 main.js 中使用 import 命令就像導入模塊一樣，將獨立 .scss 文件全局導入項目。
import "./static/common.scss";
總結
以上所述是小編給大家介紹的在 vue-cli v3.0 中使用 SCSS/SASS的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
最近看完Vue3和Vite文檔之后,就寫了個小demo,整體感覺下來還是很絲滑的,下面這篇文章主要給大家介紹了關于vite+element-plus項目基礎搭建的全過程,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue 配置多頁面應用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
Vue reactive函數(shù)實現(xiàn)流程詳解
一個基本類型的數(shù)據(jù),想要變成響應式數(shù)據(jù),那么需要通過ref函數(shù)包裹,而如果是一個對象的話,那么需要使用reactive函數(shù),這篇文章主要介紹了Vue reactive函數(shù)2023-01-01
組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。這篇文章主要介紹了一文快速詳解前端框架 Vue 最強大的功能,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue2.0結合Element-ui實戰(zhàn)案例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹在Vue中是如何封裝axios的相關資料，axios的封裝主要是幫助我們簡化代碼和利于后期的更新維護，感興趣的小伙伴可以和小編一起來閱讀下面文章的具體內(nèi)容2021-10-10
vue-cli 腳手架基于Nightwatch的端到端測試環(huán)境的過程
這篇文章主要介紹了vue-cli 腳手架基于Nightwatch的端到端測試環(huán)境的過程,需要的朋友可以參考下2018-09-09
今天小編就為大家分享一篇淺談vue引用靜態(tài)資源需要注意的事項，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vuex 作為一個老牌 Vue 狀態(tài)管理庫，大家都很熟悉了，Pinia 是 Vue.js 團隊成員專門為 Vue 開發(fā)的一個全新的狀態(tài)管理庫，本文就來講講它的具體使用吧2023-04-04
本篇文章主要介紹了詳解使用vue腳手架工具搭建vue-webpack項目，非常具有實用價值，需要的朋友可以參考下2017-05-05