vue創建項目時sass指的是什么

這篇文章主要介紹“vue創建項目時sass指的是什么”，在日常操作中，相信很多人在vue創建項目時sass指的是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue創建項目時sass指的是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

vue創建項目時使用的sass是強化css輔助工具的意思，是對css的擴展；sass是由buby語言編寫的一款css預處理語言，和html有一樣嚴格的縮進風格，和css編寫規范相比是不使用花括號和分號的。

本教程操作環境：windows10系統、Vue3版、Dell G3電腦。

vue創建項目時sass是什么意思

Sass (Syntactically Awesome StyleSheets)，是由buby語言編寫的一款css預處理語言，和html一樣有嚴格的縮進風格，和css編寫規范有著很大的出入，是不使用花括號和分號的，所以不被廣為接受。

Sass 是一款強化 CSS 的輔助工具，是對 CSS 的擴展，它在 CSS 語法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、繼承(extend)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助于更好地組織管理樣式文件，以及更高效地開發項目， 其后綴是.sass。

// deom.sass
#sidebar
　　width: 30%
　　background-color: #faa

擴展知識：

vue-cli3提供了兩種方式集成sass/scss

• 創建項目時選擇預處理器sass

• 手動安裝sass-loader

方法一：創建vue項目時選擇預處理器sass

使用vue-cli3創建vue項目

Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features

移動上下鍵選擇Manually select features，表示手動選擇創建項目的配置。

按enter鍵，進入下一步操作，顯示如下：

? Check the features needed for your project: 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

移動上下鍵在CSS Pre-processors處點擊空格鍵以選中，表示需要css預處理工具。

之后再進行css預處理工具操作，顯示如下：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

選擇Sass/SCSS (with node-sass)作為我們的CSS預處理器。

完成后項目會幫我們自動安裝sass-loader 以及 node-sass依賴。

方法二：手動安裝

如果在創建項目沒有選擇CSS 預處理器，我們也可以手動安裝sass-loader以及 node-sass來集成scss

npm install -D sass-loader node-sass

使用sass

至此我們只需要在style指定lang為scss即可：

<style>
$color = red;
</style>

vue service clie會自動使用我們安裝的sass-loader作為scss內容的加載器。

到此，關于“vue創建項目時sass指的是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！