Question

我有以下webpack.conf.js：
const webpack = require（＆＃39; webpack＆＃39;）;

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}
    })
  ]
};

这个我的ts文件导入较少的文件（my-cmp.ts）：
import './my-cmp.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减少装载机投掷错误

1 个答案: