寫在前面：在前面我們對css打包和分離進行了描述。此節我們開始學習如何對less文件進行打包和分離。

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。Less 可以運行在 Node 或瀏覽器端。 Less知識學習

1.Less文件的打包處理

1.1 在src/index.html文件中新增一個標簽，樣式采用less編寫。

  <div id="less_part">less</div>

1.2 在css目錄下新建一個less文件，此處為black.less

@base :#000;
#less_part{
  width:300px;
  height:300px;
  background-color:@base;
}
 

@base是我們設置的變量名稱。

1.3 在src目錄下的entry.js中引入less文件

import less from ‘./css/black.less‘

1.4 安裝Less的服務

要使用Less，我們要首先安裝Less的服務，當然也是用npm來進行安裝或者cnpm來安裝。

npm install --save-dev less

還需要安裝Less-loader用來打包使用。

1.5 Less-loader安裝

npm  install --save-dev less-loader

1.6 配置loader

安裝好後，需要在webpack.config.js裏編寫loader配置，當然要想正確解析成css，還是需要style-loader和css-loader的幫助，但是這兩個loader前邊已經講過了，所以在這裏就不重復了，style-loader和css-loader學習

webpack.config.js：

 //針對.less的處理配置
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                },{
                    loader: 
 
"less-loader" // compiles Less to CSS
                }]
            },

1.7 打包+啟動服務

使用webpack命令進行打包，此時我們可以發現，相關的樣式被打包到了js當中。當然這是正確的，我們可以使用npm run server命令啟動服務，最終也能正常渲染頁面，我們的less樣式被正確引用。

渲染效果：

在實際開發中我們可能會把想相關的css文件與js文件分離開來，以便管理，此處我們把Lees文件進行分離。

2.分離Less文件

在上一節當中我們學習了extract-text-webpack-plugin這個插件，也是需要通過這個插件來實現less文件的分離。 插件的使用

更改上述webpack.config.js文件中針對less文件的配置（使用分離的配置），修改後的代碼為：

   {
                test: /\.less$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            },

配置好後，使用webpack命令進行打包，此時less編寫的樣式被分離到了index.css文件裏（配置的css打包路徑）。

然後使用npm run server命令重新啟動服務，渲染效果與上面一致。

(11/24) css進階：Less文件的打包和分離