1. 程式人生 > >webpack配置:less文件打包和分離

webpack配置:less文件打包和分離

配置 ont style load http htm 引入 其他 nbsp

一、less文件打包和分離

  1、要使用less,首先使用npm安裝less服務;還需要安裝Less-loader用來打包使用。

npm install  less --save-dev

npm install less-loader --save-dev 

  2、在module中配置

{
    test: /\.less$/,
    use: [{
        loader: "style-loader" 
    },{
        loader: "css-loader" 
    },{
        loader: "less-loader"
    }]
}

  3、在html中編寫一個div,在css中新建一個less文件

<div id="leesBox"></div>
@base:yellowgreen;
#leesBox{
    width:300px;
    height:200px;
    background: @base;
}

  4、引入到index.js中

import less from ./css/black.less;

  5、使用webpack進行打包,輸入npm run server 查看效果

技術分享圖片技術分享圖片

  6、less分離

二、sass文件打包和分離

1、安裝:因為sass-loader依賴於node-sass,所以需要先安裝node-sass

npm install node-sass --save-dev 
npm install sass
-loader --save-dev

  其他與less安裝基本一致

webpack配置:less文件打包和分離