VSCode下讓CSS文件完美支持SCSS或SASS語法方法

VSCode下讓CSS文件完美支持SCSS或SASS語法方法

習慣Webpack + PostCSS後, 一般 PostCSS都是直接對 CSS文件進行處理, 可是大部分習慣SCSS/SASS/LESS的朋友也許不適應了. 我專門研究了一下, 在 Visual Studio Code編輯器下若是配置相關代碼和設置達到CSS文件完美編寫SCSS的辦法, 其餘語法類型原理類似, 這裏以 SCSS爲例.

開始配置

Visual Studio Code編輯器設置的配置

首先, 配置編輯器的設置, 按快捷鍵"CTRL + ,"打開用戶設置, 添加以下配置片斷:

"files.associations": {
  "*.css": "scss"
}

我這裏作了全局的用戶設置, 由於我我的大部分狀況下是寫SCSS, 固然若是你僅對該項目配置, 也能夠將上面這段放進工做區設置(是放在默認花括號內哦, 千萬不要弄錯了~).

這樣, VSCode編輯器就會把全部CSS文件當成SCSS格式來解析了, 也就不會出現可怕的紅色波浪線了.

PostCSS的配置

接下來, 對PostCSS進行相關配置. 咱們這裏須要安裝最重要的兩個PostCSS插件postcss-scss和precss. 執行命令:

npm i -D postcss-scss precss

安裝好後, 修改項目的postcss.config.js配置以下(我另外有用到autoprefixer和cssnano, 固然你能夠根據我的狀況選擇, 重要部分是parser: 'postcss-scss'和require('precss')):

module.exports = {
  parser: 'postcss-scss',
  plugins: [
    require('precss'),
    require('autoprefixer'),
    require('cssnano')
  ]
}

這樣問題就解決了. 試着編譯一下如下測試代碼:

/* css文件用scss語法測試 */
$blue: #056ef0;
.test {
  display: flex; // 這是scss註釋
  color: $blue;
  .box {
    flex: 1;
  }
}

編譯後:

.test{display:-webkit-box;display:-ms-flexbox;display:flex;color:#056ef0}.test .box{-webkit-box-flex:1;-ms-flex:1;flex:1}

Tips: 我用了cssnano, 所以註釋被自動去除, 若是須要保留, 需參閱cssnano文檔進行相關配置.

結語

至此, 咱們的編輯器和項目都對CSS文件下編寫SCSS有了很好的兼容. 至於其餘用SASS和LESS的朋友能夠觸類旁通, 安裝對應的插件和修改VSCode設置. 整個操做過程應該花不了十分鐘, 之後就能愉快的在CSS文件上面寫SCSS啦~ 關於本次測試的代碼能夠訪問postcss study查看.

若是文中有誤, 或者還有什麼疑問歡迎留言~

題外

• 若是有人還不是很清楚SCSS和Sass的區別能夠閱讀Intro to SCSS for Sass Users

• postcss-scss插件到底作了什麼? 據我觀察, 行註釋會被轉換成標準的CSS塊註釋, 而其餘的做用還還沒有理解, 下面是官方描述:

  This module does not compile SCSS. It simply parses mixins as custom at-rules & variables as properties, so that PostCSS plugins can then transform SCSS source code alongside CSS.

• 關於Webpack + PostCSS環境如何搭建的, 須要哪些依賴包, 你們能夠直接看個人前文提到過的DEMO項目
• 關於PostCSS我也才用不到一年, 感受確實很方便, 幾乎能夠替代SCSS了, 好比, 之前作項目須要引入第三方插件CSS, 而本身用的是SCSS, 那麼Webpack解析就須要兩個規則匹配. PostCSS的插件也是很是的豐富, 通過幾年的發展, 不少插件爲開發工做帶來很好的便利. 例如移動端適配的px轉rem單位的插件postcss-pxtorem, 我這裏也有個完整的DEMO, 提供給你們參考~