Question

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

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

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

建立/ 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'; }

语义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.

使用webpack，less-loader和vuejs无法识别的输入

1 个答案: