代码之家 › 专栏 › 技术社区 › srgbnd

由于less loader错误,无法绑定less文件

less webpack

srgbnd · 技术社区 · 6 年前

webpack 3.5.5,less 3.8.1,less loader 4.1.0,angularjs 1.6.9

我正试图建立一个捆绑包。在angularjs组件中导入较少的文件之前,一切都正常。

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

更少的文件内容:

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

/* 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

我在网页包配置中遗漏了什么?

1 回复 | 直到 6 年前

hostar 6 年前

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台装载机。当然,您还需要安装所有的加载器来完成这项工作(样式加载器和css加载器)