webpack配置:less文件打包和分離
阿新 • • 發佈:2018-03-26
配置 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文件打包和分離