這篇文章主要講解了“webpack如何打包less或sass資源”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“webpack如何打包less或sass資源”吧！

創(chuàng)新新互聯(lián)，憑借10多年的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)經(jīng)驗(yàn)，本著真心·誠(chéng)心服務(wù)的企業(yè)理念服務(wù)于成都中小企業(yè)設(shè)計(jì)網(wǎng)站有上1000家案例。做網(wǎng)站建設(shè)，選創(chuàng)新互聯(lián)。

下載插件

less 下載 less包和less-loader

sass 下載node-sass和sass-loader

使用插件

webpack.config.js

 module: {                  //css打包規(guī)則
        rules: [{
            test: /\.css$/,        //把項(xiàng)目中所有以.css結(jié)尾的文件打包,插入到html里
            use: ["style-loader","css-loader"]  //css兼容loader，單獨(dú)的css文件
        }, {
            test: /\.less$/,
            use: ["style-loader","css-loader","less-loader"]   //從右到左,內(nèi)聯(lián)樣式
        },{
            test: /\.scss$/,
            use: ["style-loader","css-loader","sass-loader"]
        }]
    },

目錄結(jié)構(gòu)

lessstyle.less

@width:200px;
@height:200px;
@color:red;

body {
  margin: 0;
  padding: 0;
}
p {
  color: @color;
  font-size: 25px;
}
h2 {
  color: blue;
  font-size: 88px;
}
.box2 {
  width: @width;
  height: @height;
  background-color: @color;
}

sassstyle.scss

$w:50px;
$h:100px;
.box3 {
  width: $w;
  height: $h * 3;
  background-color: greenyellow;
  color: bisque;
}

index.html

    
    


商城首頁~~~~~~
打包c(diǎn)ss

    this is a box1


    this is a box2


    this is a box3

index.js

require("../css/style.css")
require("../css/lessstyle.less")
require("../css/sassstyle.scss")
console.log("首頁專用js文件");

執(zhí)行webpack

html頁面

感謝各位的閱讀，以上就是“webpack如何打包less或sass資源”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)webpack如何打包less或sass資源這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！