webpack、less-loader 和 vuejs 无法识别的输入

Question

我正在尝试将自定义 SemanticUI 构建集成到 webpack vue.js 模板中。我没有遇到 jquery 和 SemanticUI 模块集成的问题，但是我没有让更少的文件工作。

我使用vue-cli 和webpack 模板创建了应用程序，并相应地安装了less-loader 和style-loader 到npm。

在添加 SemanticUI less 文件之前，我想看看我的构建管道是否正常工作，所以我创建了以下文件夹结构和测试文件：

构建/webpack.base.conf.js

resolve: {
  // ...
  alias: {
    // ...
    'semantic-ui': path.resolve(__dirname, '../semantic-ui')
  }
  // ...
}
// ...
module: {
  // ...
  loaders: {
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
  }
  // ...
}

semantic-ui/semantic.less

& { @import 'test.less'; }

semantic-ui/test.less

@variable: 2px;

src/main.js

// ...
require('semantic-ui/semantic.less')
// ...

但是当我运行npm run dev时，总是会出现以下错误

ERROR in ./~/css-loader!./~/less-loader!./~/style-loader!./~/css-loader!./~/less-loader!./semantic-ui/semantic.less
Module build failed: Unrecognised input
 @ /Users/robert/Code/vue/jquery-test/semantic-ui/semantic.less (line 4, column 12)
 near lines:
   // load the styles
   var content = require("!!./../node_modules/css-loader/index.js!./../node_modules/less-loader/index.js!./semantic.less");
   if(typeof content === 'string') content = [[module.id, content, '']];
 @ ./semantic-ui/semantic.less 4:14-236 13:2-17:4 14:20-242

我尝试了几件事，例如在 @import 文件路径前加上 ~ 和 .，但没有任何变化。一般来说，我对 webpack 和前端开发还很陌生，所以我不知道在哪里寻找答案......

提前致谢！

Answer 1

好像你没有少装，你可以在你的package.json中查看，然后

npm install less --save-dev.