编译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文件中直接右键在跳出的菜单里选择编译选项就会自动生成这个编译后的文件