20190423-Vscode與Sass不得不說的秘密(>^ω^<)


這是亂七八糟的前言:emmm,今天倔強的點,是關於Vscode使用easySass插件時,不安裝ruby環境,直接使用插件編譯時,不進行設置,分音是會轉譯為Css文件的= =,神坑的后知后覺才發現是因為插件的問題,搞了近倆小時不止~

目錄

1、easySass插件的默認用戶設置

1.1文件》首選項》設置》settings.json全局配置文件

1.2默認用戶設置

"easysass.compileAfterSave": true,
//保存scss/sass文件后自動編譯
"easysass.excludeRegex": "",
//提供文件名正則表達式,匹配到的文件會被排除,不會編譯為css,默認為空,則功能關閉
"easysass.formats": [
    {
      "format": "expanded",
      "extension": ".css"
    },
    {
      "format": "compressed",
      "extension": ".min.css"
    }
],
//編譯不同風格的css
1.easysass.formats[i]format用以編譯生成對應風格的css,參數值
nested:嵌套縮進的 css 代碼。
expanded:沒有縮進的、擴展的css代碼。
compact:簡潔格式的 css 代碼。
compressed:壓縮后的 css 代碼。
2.easysass.formats[i]extension用以設置編譯輸出的文件拓展名
此處可以自定義文件名,輸出的 css 文件名會按照“當前 Sass 文件名(不含拓展名)+此處自定義文件名”的格式來生成

例如:設置 "easysass.formats[i].extension": ".min.css",假設當前的 Sass 文件名為

style.scss,則編譯輸出的 css 文件名為 style.min.css
"easysass.targetDir": ""
很多情況下 scss/sass 文件和 css 文件是不在同一個目錄下的,而 Easy Sass 默認輸出的 css 是和當前 Sass 文件處於相同目錄的
為此我們需要通過該參數來配置輸出路徑

1.3更改用戶設置

在相同路徑下的CSS文件夾內生成:
"easysass.targetDir": "./css",
Sass分音導入設置:
"easysass.excludeRegex": "^_",

2、分音導入還是需要加下划線

emmm,用VScode的easySass是不需要裝ruby環境的┓( ´∀` )┏真是喜大普奔,不過,emmm分音時還是要記得更改用戶設置,以及導入時千萬記得加上下划線_,不然會報找不到文件夾的錯誤!

參考文獻:

使用VScode來編譯Sass


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM