请先查看 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"], }, ], }, };