資訊專欄INFORMATION COLUMN
摘要：下讓文件完美支持或語(yǔ)法方法習(xí)慣后通常都是直接對(duì)文件進(jìn)行處理但是大部分習(xí)慣的朋友也許不適應(yīng)了我專門研究了一下在編輯器下如果配置相關(guān)代碼和設(shè)置達(dá)到文件完美編寫的辦法其他語(yǔ)法類型原理相似這里以為例開始配置編輯器設(shè)置的配置首先配置編輯器的設(shè)置按快捷
VSCode下讓CSS文件完美支持SCSS或SASS語(yǔ)法方法
習(xí)慣Webpack + PostCSS后, 通常PostCSS都是直接對(duì)CSS文件進(jìn)行處理, 但是大部分習(xí)慣SCSS/SASS/LESS的朋友也許不適應(yīng)了. 我專門研究了一下, 在Visual Studio Code編輯器下如果配置相關(guān)代碼和設(shè)置達(dá)到CSS文件完美編寫SCSS的辦法, 其他語(yǔ)法類型原理相似, 這里以SCSS為例.開始配置 Visual Studio Code編輯器設(shè)置的配置
首先, 配置編輯器的設(shè)置, 按快捷鍵"CTRL + ,"打開用戶設(shè)置, 添加如下配置片段:
"files.associations": {
"*.css": "scss"
}
我這里做了全局的用戶設(shè)置, 因?yàn)槲覀€(gè)人大部分情況下是寫SCSS, 當(dāng)然如果你僅對(duì)該項(xiàng)目配置, 也可以將上面這段放進(jìn)工作區(qū)設(shè)置(是放在默認(rèn)花括號(hào)內(nèi)哦, 千萬(wàn)不要弄錯(cuò)了~).
這樣, VSCode編輯器就會(huì)把所有CSS文件當(dāng)成SCSS格式來(lái)解析了, 也就不會(huì)出現(xiàn)可怕的紅色波浪線了.
PostCSS的配置接下來(lái), 對(duì)PostCSS進(jìn)行相關(guān)配置. 我們這里需要安裝最重要的兩個(gè)PostCSS插件postcss-scss和precss. 執(zhí)行命令:
npm i -D postcss-scss precss
安裝好后, 修改項(xiàng)目的postcss.config.js配置如下(我另外有用到autoprefixer和cssnano, 當(dāng)然你可以根據(jù)個(gè)人情況選擇, 重要部分是parser: "postcss-scss"和require("precss")):
module.exports = {
parser: "postcss-scss",
plugins: [
require("precss"),
require("autoprefixer"),
require("cssnano")
]
}
這樣問(wèn)題就解決了. 試著編譯一下以下測(cè)試代碼:
/* css文件用scss語(yǔ)法測(cè)試 */
$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, 因此注釋被自動(dòng)去除, 如果需要保留, 需參閱cssnano文檔進(jìn)行相關(guān)配置.結(jié)語(yǔ)
至此, 我們的編輯器和項(xiàng)目都對(duì)CSS文件下編寫SCSS有了很好的兼容. 至于其他用SASS和LESS的朋友可以舉一反三, 安裝對(duì)應(yīng)的插件和修改VSCode設(shè)置. 整個(gè)操作過(guò)程應(yīng)該花不了十分鐘, 以后就能愉快的在CSS文件上面寫SCSS啦~ 關(guān)于本次測(cè)試的代碼可以訪問(wèn)postcss study查看.
如果文中有誤, 或者還有什么疑問(wèn)歡迎留言~
題外如果有人還不是很清楚SCSS和Sass的區(qū)別可以閱讀Intro to SCSS for Sass Users
postcss-scss插件到底做了什么? 據(jù)我觀察, 行注釋會(huì)被轉(zhuǎn)換成標(biāo)準(zhǔn)的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.
關(guān)于Webpack + PostCSS環(huán)境如何搭建的, 需要哪些依賴包, 大家可以直接看我的前文提到過(guò)的DEMO項(xiàng)目
關(guān)于PostCSS我也才用不到一年, 感覺(jué)確實(shí)很方便, 幾乎可以替代SCSS了, 比如, 以前做項(xiàng)目需要引入第三方插件CSS, 而自己用的是SCSS, 那么Webpack解析就需要兩個(gè)規(guī)則匹配. PostCSS的插件也是非常的豐富, 經(jīng)過(guò)幾年的發(fā)展, 很多插件為開發(fā)工作帶來(lái)很好的便利. 例如移動(dòng)端適配的px轉(zhuǎn)rem單位的插件postcss-pxtorem, 我這里也有個(gè)完整的DEMO, 提供給大家參考~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/115667.html
摘要：插件集待補(bǔ)充。。。同時(shí)，它還包含了用于轉(zhuǎn)換為格式和生成數(shù)據(jù)模式的選項(xiàng)用于壓縮合并和文件的應(yīng)用程序。它提供了大量自定義的設(shè)置，以及自動(dòng)壓縮保存并導(dǎo)出為文件的選項(xiàng)。修改文本的更多命名格式，包括駝峰命名下劃線分隔命名，命名以及命名等切換漂亮的主題 插件集 待補(bǔ)充。。。 20180903 文件 【Path Intellisense】 自動(dòng)補(bǔ)全路徑 瀏覽器 【Open-In-Browser】在...
摘要：插件集待補(bǔ)充。。。同時(shí)，它還包含了用于轉(zhuǎn)換為格式和生成數(shù)據(jù)模式的選項(xiàng)用于壓縮合并和文件的應(yīng)用程序。它提供了大量自定義的設(shè)置，以及自動(dòng)壓縮保存并導(dǎo)出為文件的選項(xiàng)。修改文本的更多命名格式，包括駝峰命名下劃線分隔命名，命名以及命名等切換漂亮的主題 插件集 待補(bǔ)充。。。 20180903 文件 【Path Intellisense】 自動(dòng)補(bǔ)全路徑 瀏覽器 【Open-In-Browser】在...
摘要：名稱功能自動(dòng)閉合標(biāo)簽自動(dòng)提示修改標(biāo)簽時(shí)，自動(dòng)修改匹配的標(biāo)簽格式化編寫更加人性化的注釋添加行書簽的瀏覽器兼容性檢查運(yùn)行選中代碼段支持大量語(yǔ)言，包括單詞拼寫檢查在中彈出瀏覽器并搜索，可編輯搜索引擎顏色值在代碼中高亮顯示小窗口顯示顏色值，等等拾色 名稱 功能 Auto Close Tag 自動(dòng)閉合HTML標(biāo)簽 Auto Import...
摘要：宋體以像素為單位控制字號(hào)。將其設(shè)置為可隱藏窗格。是否已啟用自動(dòng)刷新是否啟用自動(dòng)拉取以像素為單位控制終端的字號(hào)，這是的默認(rèn)值。要求工作區(qū)使用高于版本的。 用戶設(shè)置 打開 文件 > 首選項(xiàng) > 用戶設(shè)置(U)，（忽略覆蓋工作區(qū)提示） { // 一個(gè)制表符等于的空格數(shù)。該設(shè)置在 `editor.detectIndentation` 啟用時(shí)根據(jù)文件內(nèi)容進(jìn)行重寫。 editor.tabS...
閱讀 2608·2023-04-25 19:31
閱讀 2331·2021-11-04 16:11
閱讀 2887·2021-10-08 10:05
閱讀 1598·2021-09-30 09:48
閱讀 2426·2019-08-30 15:56
閱讀 2478·2019-08-30 15:56
閱讀 2237·2019-08-30 15:53
閱讀 2344·2019-08-30 15:44
