編譯scss為css
A. 如何將scss轉換成css文件
如：在D盤建立一個SASS文件夾，文件夾下有一個style.scss文件（scss，sass都行。sass文件對代碼的排版有著非常嚴格的要求，而且沒有大括弧，沒有分號。scss對代碼的要求沒那麼高。）用下面的方法可以將sass或者scss轉換為css文件。
首先輸出 D: 代表找到D盤 ；
然後輸出cd sass 代表找到sass文件夾，其中cd是一定要的；
最後輸出 sass>sass --watch style.scss:style.css 在sass文件夾下將style.scss轉換為style.css 。sass --watch代表一直監聽著style.scss 只要在編輯器上更新了scss就會自動更新style.css 。
B. vscode 如何讀取scss文件同步成css文件，需要下哪種插件
vscode
只是編輯器，不具備這種讀取並編譯的功能（可以使用在nodeJS使用的sass插件實現），不過vscode
可以把正在編輯的scss文件在保存的時候編譯成css。在找到插件之前你可能需要：
建議還是看看sass或者scss的官方文檔，到底什麼能編譯出來（已收貨14踩！）。
C. react+webpack+scss 怎麼編譯css獨立文件
處理scss文件需要sass-loader
npminstallsass-loadernode-sass--save-dev
【注】以下配置中需要用到的模塊，請自行安裝
extract-text-webpack-plugin
postcss-loader
precss
autoprefixer
然後在webpack.config.js文件做以下配置
//css文件提取器需要的插件
varExtractTextPlugin=require('extract-text-webpack-plugin');
//postcss-loader需要的配置項
varprecss=require('precss');
varautoprefixer=require('autoprefixer');
mole.exports={
...
mole:{
loaders:[
{
test:/.scss$/,
loader:ExtractTextPlugin.extract('style','css!postcss-loader','sass')}
]
},
postcss:function(){
return[precss,autoprefixer];
}
}
D. 如何安裝並編譯sass為css文件
Ruby安裝
由於sass依賴於ruby環境，所以在安裝sass之前必須安裝ruby。可以去官網下載一個。網路環境不好的，可以用我提供的這個文件：點擊下載
安裝完成後可以在開始菜單找到ruby命令行，打開輸入ruby -v查看版本號，出現版本信息則安裝成功
clipboard.png-6.6kB
QQ截圖20160917210342.png-1.6kB
Sass安裝
安裝完ruby後，可以直接在命令行裡面輸入gem install sass安裝Sass，不過由於牆的厲害，建議使用淘寶的ruby源來安裝，步驟如下：
gem sources --remove https://rubygems.org/
https://rubygems.org/ removed from sources
gem sources -a https://ruby.taobao.org/
https://ruby.taobao.org/ added to sources
這一步有可能會出錯，windows下證書無法驗證。
解決方法：下載證書（右鍵另存為即可），放到ruby安裝目錄下，然後再設置環境變數SSL_CERT_FILE為該文件路徑，再重新輸入該命令
QQ截圖20160917211759.png-8.6kB
gem source -l
*** CURRENT SOURCES ***
https://ruby.taobao.org/
gem install sass
Fetching: sass-3.4.13.gem (100%)
Successfully installed sass-3.4.13
Parsing documentation for sass-3.4.13
Installing ri documentation for sass-3.4.13
Done installing documentation for sass after 12 seconds
1 gem installed
//如果你在安裝時出現如下提示，則表明網路不佳或源沒有切換到 ruby.taobao.org
ERROR: Could not find a valid gem 'sass' (>= 0), here is why:
Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (
https://api.rubygems.org/latest_specs.4.8.gz)
sass -v
Sass 3.4.13 (Selective Steve)
到此，所有的安裝都結束了。接下來我們就可以直接編譯sass文件了
Sass編譯
打開ruby命令行，切換到scss文件所在目錄，執行sass style.scss style.css,就可以將style.scss文件編譯成style.css文件
E. 為什麼用scss編譯過的css文件不能用git提交
可能出現的原因：1.可能引入的css文件代碼被注釋了。2.可能路徑寫錯了。3.可能css代碼寫錯了。4.可能還要再重啟一下myeclipse。解決的方法：1.檢查一下jsp代碼中引入的css文件的那塊代碼。以下形式：去掉因為myeclipse默認是把css樣式注釋掉的。2.檢查路徑是否寫錯。3.css代碼寫錯了。4.重啟一下myeclipse，去掉上面的注釋之後，關閉myeclipse，再重新打開myeclipse，就可以看到css效果已經載入成功了。
F. start command prompt with ruby中怎麼將兩個scss文件生成一個css文件
前言
這段時間一直在看Bootstrap，V3官方直接提供了Less版本的源碼，就先將Less學完了，很簡單的語法，學習寫Demo都是在Webstorm里寫的，配置了Watcher自動編譯（詳見《在WebStorm里配置watcher實現編輯less文件時自動生成.map和壓縮後的.css文件》）。
隨著學習的加深，開始接觸Sass了，Bootstrap V3也提供了Sass的源碼，而且V4官方就只提供Sass的源碼，從側面證明Sass的流行趨勢，畢竟Sass功能更全面，因此筆者決定以後就使用Sass了（新版本叫Scss）。
開始動手
1、下載rubyinstaller-2.3.3-x64.exe 安裝（從官網下載，注意，安裝過程中下面的設置。
補充：
參數值里，-t 後面可以配置的值
值
結果
nested 嵌套
expanded 展開
compact 每句一行
compressed 壓縮
閱讀全文
版權聲明：本文為博主原創文章，未經博主允許不得轉載。
G. 怎麼使scss編譯成css後，頂部有@charset=utf-8
明CSS文件的頁面編碼為UTF-8。。如果這個CSS的文件編碼也是UTF-8的話。。那麼在瀏覽器中看到的CSS文件的頁面中中文的注釋或者中文字體就可以正確顯示為中文，如果CSS的文件編碼和頁面不一致的話。那麼這個CSS文件的中文則會顯示為亂碼。。特別是定義中文字體的時候。就不能正確識別。
H. webstorm 配置sass輸出css文件格式配置
本文前提 是電腦里已經順利安裝了ruby,sass等之後，再進行webstorm中配置sass的watcher，以及改變watcher中的默認選項；如果以上都還沒有做，可以自行網路解決，很容易找到的；
本文使用的webstorm為11.0版本
點擊左上角的 *File→Settings→File Watchers ***
在彈窗的窗口的右上角點擊綠色的 『+』 號,然後選擇scss
然後按照下圖進行操作：
其中黃色的地方都要填好，program那裡是你安裝ruby中響應的scss.bat的路徑，如果安裝ruby時，你不是按照默認c盤路徑按裝的話，那麼那裡是需要需改的；
按道理其中只有兩個地方是需要修改的,其他我沒有改過,都是默認就是那樣的 ：
1、Arguments:
可以配置編譯後的文件的輸出路徑,我這里寫的是:
--no-cache --update --sourcemap --watch : css$FileNameWithoutExtension$.css
注意, 後面有個冒號,然後 表示的是 scss文件所在的文件夾的父級文件夾 ,而不是scss文件的父文件夾.
舉個例子,我的項目叫lianxi,裡面有個sass文件夾,裡面存放scss文件,那麼按照這樣配置的結果, www.scss 所在的文件夾就是sass,sass的父文件夾就是lianxi,然後找到lianxi下的css文件夾,編譯後的 www.css 文件就會在這里.
如圖所示：
2、 Output paths to refresh:
改成這樣: .css: .css.map
經過以上配置就實現了， webstorm支持sass的同步編譯,也就是即寫即編譯,並且可以指定編譯後的css的目錄.
這里需要注意兩點：
1》同步編譯只能在項目文件夾下,也就是webstorm左側打開的項目.隨便打開一個項目外的文件是不行的.
2》這個和webstorm沒有什麼關系,就是sass編譯不能帶有中文,無論是路徑名,文件名,文件里的內容,都不能識別中文,如果要修改它也不是不可以,但我覺得不用中文也挺好的,養成好習慣嘛.
原文網址摘自於 http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561
I. hbuild 預編譯怎麼scss自動生成css
最新版可以直接編譯的
在scss文件或者less文件中直接右鍵在跳出的菜單里選擇編譯選項就會自動生成這個編譯後的文件