javascript - 使用 webpack、less-loader 和 vuejs 无法识别输入

Question

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

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

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

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

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

npm install less --save-dev.