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

Question

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

我创建与应用程序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"
  }
  // ...
}

语义ui/semantic.less

& { @import 'test.less'; }

语义用户界面/test.less

@variable: 2px;

源代码/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文件路径前面加上 a~和 a .，但没有任何变化。总的来说，我对 webpack 和前端开发还很陌生，所以我对在哪里寻找答案有些茫然......

提前致谢！

Answer 1

看来你没有安装less，你可以在你的package.json中检查一下，然后

npm install less --save-dev.