ts-loader、antd 和 typescript - 找不到模块 index.less答案

【问题标题】：ts-loader, antd and, typescript - cannot find module index.lessts-loader、antd 和 typescript - 找不到模块 index.less
【发布时间】：2018-07-03 11:06:10
【问题描述】：

在我的项目中，我使用antd react 组件库，我需要使用ts-loader 以合理的方式加载组件。现在我正在尝试使用 webpack 转换 less 文件，但我收到以下错误：

ERROR in ./node_modules/antd/lib/button/style/index.less
Module build failed: Error: Cannot find module 'less'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
    at Function.Module._load (internal/modules/cjs/loader.js:520:25)
...

看起来要么less-loader 没有安装（它是），要么它没有正确配置（它应该是）。这是我的 webpack 配置：

webpack.dev.js

module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        loader: 'less-loader' // compiles Less to CSS
      },
    ]
  },

common.webpack.js

const getTsLoaderRule = env => {
  const rules = [
    { loader: 'cache-loader' },
    {
      loader: 'ts-loader',
      options: {
            transpileOnly: true,
            getCustomTransformers: () => ({
            before: [ tsImportPluginFactory({
              libraryDirectory: 'es',
              libraryName: 'antd',
              style: 'css',
            })]
          }),
          compilerOptions: {
            module: 'es2015'
          }
        },
    }
  ];
  if (env === 'development') {
    rules.unshift({
      loader: 'react-hot-loader/webpack'
    });
  }
  return rules;
};
...
module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: getTsLoaderRule(options.env),
        include: [utils.root('./src/main/webapp/app')],
        exclude: ['node_modules']
      },
      {
        test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
        loaders: ['file-loader?hash=sha512&digest=hex&name=content/[hash].[ext]']
      },
      {
        enforce: 'pre',
        test: /\.jsx?$/,
        loader: 'source-map-loader'
      },
      {
        test: /\.tsx?$/,
        enforce: 'pre',
        loaders: 'tslint-loader',
        exclude: ['node_modules']
      }
    ]
  },

有什么想法吗？

【问题讨论】：

标签： typescript webpack antd

【解决方案1】：

错误消息不是关于错误配置的less-loader，而是缺少less，这是包的对等依赖项。运行npm i -S less进行安装。

【讨论】：

已安装。还能是什么？
我不确定，因为它特别提到了less。你有可能在 GitHub 上建立一个最小的存储库来测试它吗？你的 index.less 是什么样的？