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