我正在處理的項目有一個複雜的樣式表庫,其中包含多個scss供應商庫以及許多文件和文件夾,這些文件和文件夾被編譯爲單個css文件的scss文件填充。尋找從SASS編譯的CSS文件的源碼
當我想對css進行簡單的更改時,我必須花費大量時間搜索源文件scss文件的文件結構。通常我只是在瀏覽器中使用開發人員工具,但這隻顯示了css文件的外觀,大多數時候這些類是由多個源創建的並相互覆蓋,所以scss看起來不像css結束。
有沒有一種簡單的方法來找到scss編譯的css源碼?
我正在處理的項目有一個複雜的樣式表庫,其中包含多個scss供應商庫以及許多文件和文件夾,這些文件和文件夾被編譯爲單個css文件的scss文件填充。尋找從SASS編譯的CSS文件的源碼
當我想對css進行簡單的更改時,我必須花費大量時間搜索源文件scss文件的文件結構。通常我只是在瀏覽器中使用開發人員工具,但這隻顯示了css文件的外觀,大多數時候這些類是由多個源創建的並相互覆蓋,所以scss看起來不像css結束。
有沒有一種簡單的方法來找到scss編譯的css源碼?
這是一個鏈接,顯示如何在Google Chrome上啓用SASS文件的源映射。有了這個,你就可以做到你想要的東西http://bricss.net/post/33788072565/using-sass-source-maps-in-webkit-inspector
如果有其他人在這裏結束,要使用Chrome for Sass中的源地圖,你需要先使用--sourcemap
標誌來生成它們!
sass --watch --sourcemap --debug-in sass/screen.scss:screen.css
更多信息:https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass
並採用--debug-info
標誌樹立SCSS由FireSass閱讀。