由于 less-loader 错误，无法捆绑 less 文件答案

【问题标题】：Unable bundle a less file due to a less-loader error由于 less-loader 错误，无法捆绑 less 文件
【发布时间】：2018-09-21 19:42:06
【问题描述】：

webpack 3.5.5、less 3.8.1、less-loader 4.1.0、angularjs 1.6.9

我正在尝试构建一个捆绑包。一切正常，直到我在其中一个 angularjs 组件中导入一个 less 文件。

import '../styles/angular-json-tree.less';

文件内容少：

.json-tree-out {
  overflow-y: scroll;
  padding: 1em;
  font-size: 14px;
}

Webpack 配置，其中我的规则中有 less-loader：

/* global __dirname, module, require */
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      _: 'lodash',
    }),
    // new webpack.optimize.UglifyJsPlugin(), // uncomment this property to enable minimization
  ],
  entry: {
    app: ['babel-polyfill', './public/app/app.js'],
  },
  output: {
    path: __dirname + '/public/dist/',
    publicPath: '/public/dist/',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['env'],
        },
        exclude: /(node_modules|lib|server|test|migrations|seeds)/,
      },
      {
        test: /\.less$/,
        loader: 'less-loader', // compiles Less to CSS
        options: {
          javascriptEnabled: true
        }
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'postcss', 'sass'],
        exclude: /node_modules/,
      },
      {
        test: /\.(ttf|eot|svg|gif|png|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: 'file-loader',
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, // https://www.npmjs.com/package/font-awesome-webpack#usage
        loader: 'url-loader?limit=10000&mimetype=application/font-woff',
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        exclude: /node_modules/,
      },
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader?$!expose-loader?jQuery',
      },
    ],
  },
  node: {
    'fs': 'empty',
    'net': 'empty',
    'tls': 'empty',
    'dns': 'empty',
    'boom': 'empty',
    'hapi': 'empty',
    'inert': 'empty',
    'joi': 'empty',
    'knex': 'empty',
    'mysql': 'empty',
    'hapi-auth-jwt': 'empty',
  },
  resolve: {
    alias: {},
    extensions: ['.js', '.json'],
    modules: [
      'node_modules',
      'lib',
    ],
  },
};

我得到的错误：

ERROR in ./public/app/search/call-detail/call-detail-logs/styles/angular-json-tree.less
Module parse failed: /media/trex/safe1/Development/qxip/homer-app/node_modules/less-loader/dist/cjs.js??ref--1!/media/trex/safe1/Development/qxip/homer-app/public/app/search/call-detail/call-detail-logs/styles/angular-json-tree.less Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
| /* Page Styling */
| .json-tree-out {
|   left: 52%;
|   right: 2%;
 @ ./public/app/search/call-detail/call-detail-logs/controllers/call-detail-logs.controller.js 9:0-43
 @ ./public/app/search/call-detail/call-detail-logs/call-detail-logs.component.js
 @ ./public/app/search/call-detail/call-detail-logs/index.js
 @ ./public/app/search/call-detail/index.js
 @ ./public/app/search/index.js
 @ ./public/app/app.module.js
 @ ./public/app/app.js
 @ multi babel-polyfill ./public/app/app.js

我在 webpack 配置中遗漏了什么？

【问题讨论】：

标签： webpack less

【解决方案1】：

official documentation 表示要编写加载较少文件的规则，如下所示：

rules: [{
  test: /\.less$/,
  use: [{
    loader: 'style-loader' // creates style nodes from JS strings
  }, {
    loader: 'css-loader' // translates CSS into CommonJS
  }, {
    loader: 'less-loader' // compiles Less to CSS
  }]
}]

请注意，这实际上是一个规则，使用 3 个加载器。你当然还需要安装所有的加载器来完成这项工作（style-loader 和 css-loader）

【讨论】：