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