1.安装。
安装ruby ：http://rubyinstaller.org/downloads
创建项目：在f盘创建一个名为sass的文件夹
ruby命令行：f:
ruby命令行：cd sass
ruby命令行：gem install sass
ruby命令行：gem update sass 更新
ruby命令行：gem uninstall sass 卸载
ruby命令行：sass -v 版本检查
2.ruby编译初尝试：
test.scss
$body-color:#FF6000;
body{
background-color: $body-color;
}
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/test.css" /> </head> <body> </body> </html>
下面将scss文件编译到css文件下
ruby命令行：sass --watch demo1/scss/test.scss:demo1/css/test.css // --watch 可以不加，加上的目是在修改完scss文件后自动编译更新。
或ruby命令行：sass --watch demo1/scss/:demo1/css //将demo1/scss下的文件全部编译到demo1/css文件下
3.webpack打包编译并自动编译更新
index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>webpack打包scss文件</h1> <script src="bundle.js" type="text/javascript" charset="utf-8"></script> </body> </html>
sass.scss:
$color:#dbdbdb;
$font-color:#333333;
body{
background-color: $color;
}
h1{
color:$font-color;
}
index.js
require('./sass.scss');
webpack.config.js:
module.exports = {
entry: './index.js',
output: {
publicPath:'',
filename: 'bundle.js'
},
module: {
loaders: [
{
test:/.scss$/,
loader:['style-loader','css-loader','sass-loader']
}
]
}
}
package.json修改scripts如下：
"scripts": {
"start":"webpack-dev-server --progress --colors --hot --inline"
},
node命令行：webpack
node命令行：webpack-dev-server
如果有很多报错，则是未安装一些模块和加载器。如果报cant find module 或 cant resole .......
如处理： cnpm install --save-dev css-loader cnpm install --save-dev style-loader cnpm install --save-dev sass-loader cnpm install --save-dev node --sass
cnpm install --save-dev webpack webpack-dev-server