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查看.

如果文中有誤, 或者還有什么疑問歡迎留言~

題外

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, 提供給大家參考~

總結

以上是生活随笔為你收集整理的scss2css vscode设置_VSCode下让CSS文件完美支持SCSS或SASS语法方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。