使用webpack编译less

Question

我想在我的项目中添加一个非常基本的less文件（请参见此提交）。

style.less

body {
  background-color: red;
}

webpack.config.js

{
    test: /\.less$/,
    loaders: ['style', 'css', 'less']
}

命令行构建命令

webpack --config webpack.config.js -d

首页.html

<link rel="stylesheet" href="css/bundle.less" />

我本来期望部署文件夹现在包含bundle.css，其中包含我的less文件的内容。但这没有发生。

我该如何设置webpack来编译我的less文件？

- P.Brian.Mackey

Answer 1

有几件事情需要纠正：

1. Add require('./myPath/myFile.less') to your app.js (or entry point).

   The less file does not go in the index.html file.

2. You need a few dependencies. The versions I used are:

   "less": "^2.7.1",
   "less-loader": "^2.2.3",
   "style-loader": "^0.13.1",
   "css-loader": "^0.23.1",
   

- P.Brian.Mackey

---

回复：#1 我很惊讶文档中没有这个细节。StackOverflow 再次挽救了我们。对于那些使用 TypeScript 的人： https://dev59.com/qKHia4cB1Zd3GeqPaeAi - CharlesTWall3