使用 webpack 编译 less

我想添加一个非常基本的 less 文件到我的project https://github.com/pbrianmackey/uiexperiment在 github 上（参见这次提交 https://github.com/pbrianmackey/uiexperiment/commit/71cce2b73a387ca5019bc600ca55a2c24f5093b8).

无风格

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？

有几件事需要做已纠正 https://github.com/pbrianmackey/uiexperiment/commit/1860d89f858fe9cb63f76cfcf33316c7e389b32b:

1. Add require('./myPath/myFile.less')给你的app.js（或入口点）。

   less 文件不会进入index.html 文件。

2. 您需要一些依赖项。我使用的版本是：

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