webpack 之 打包less文件

请先查看 webpack 之 打包css

一.创建文件 在src的css文件夹中添加文件

special.less

二.文件查看

@fontSize: 50px;
@fontColor: orange;

body {
  font-size: @fontSize;
  color: @fontColor;
}

 

三.运行命令

需要安装相关loader才可以解析

 npm i less-loader less --save-dev

 

四.package.json文件需要配置

{
  "name": "k03",
  "version": "1.0.0",
  "description": "",
  "main": "main.mjs",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.3.0",
    "less": "^3.9.0",        //修改过版本
    "less-loader": "^5.0.0", //修改过版本
    "style-loader": "^1.0.0",
    "webpack": "^3.6.0"
  }
}

//修改版本后,需要执行npm i

为什么修改版本?因为版本过高,导致报错

 

五.配置webpack.config.js文件

let path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
};