webpack 2 less 加载器抛出错误

Question

我有以下 webpack.conf.js:
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/app/index.module.ts',
  },
  output: {
    path: './dist',
    filename: "[name].bundle.js"
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          'ts-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style!css!less'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.less', '.css', '.html']
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {warnings: false}
    })
  ]
};

这是我为 less 文件导入的 ts 文件 (my-cmp.ts):
import './my-cmp.less'

这是 less 文件：

& {
  .bla {
    background: #0074D9;
  }
}

这是我收到的错误：

ERROR in ./src/app/common/components/bet-form/bet-view/bet-view.cmp.ts
Module not found: Error: Can't resolve 'style!css!less' in '...'
 @ ./src/app/common/components/my-cmp.ts 3:0-26
 @ ./src/app/index.module.ts

这里是我package.json的相关部分：

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

Answer 1

从讨论中复制，因为这解决了问题：

试试 use: [ 'style-loader', 'css-loader', 'less-loader' ]。它应该是加载程序列表，请参阅 docs。语法从版本 1 到 2 略有变化。

webpack 2 less 加载器抛出错误

webpack 2 less loader throwing error

less

webpack

webpack-2