1.安装sass打包的loader
这里需要 在项目目录下用npm安装两个包。node-sass和sass-loader，（也可以使用cnpm安装）
因为sass-loader依赖于node-sass，所以需要先安装node-sass。
1.1 node-sass安装
npm install --save-dev node-sass
1.2 sass-loader安装
npm install --save-dev sass-loader
注意：在用npm安装时，这个loader很容易安装失败，最好使用cnpm来进行安装。如果你安装一直报错，最好是把node_modules文件夹删除后，再重新安装。
2.配置可直接进行SASS文件分离的loader
若不需要sass文件分离，参考上一节的配置方式
const extractTextPlugin = require("extract-text-webpack-plugin");
{
test: /\.scss$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
}
3.新建文件
3.1 scss文件建立
注意这里建立的文件格式是scss格式的。
在src/css目录下新建three.scss文件，内容为：
$nav-color: #FFF;
#sass_part {
width: 100px;
height:100px;
background-color: $nav-color;
color:#000 ;
margin: 50px
;
}
3.2 添加标签
在src目录下的index.html文件中新增，如下：
<div id="sass_part">sass</div>
4. 在src目录下的entry.js中引入scss文件(入口文件)
import less from './css/three.scss'
5.打包
使用webpack命令进行打包。
webpack
结果打包到了index.css中。
image.png
6.启动服务
使用命令npm run server启动服务。
npm run server
效果为：
image.png
