Unrecognised input with webpack, less-loader and vuejs

Question

I am trying to get a custom SemanticUI build integrated into a webpack vue.js template. I have not had a problem with jquery and SemanticUI modules integration, however I do not get the less files to work.

I've created the application with vue-cli and the webpack template and I installed less-loader and style-loader through npm accordingly.

Before adding the SemanticUI less files, I wanted see to if my build pipeline is working properly, so I created the following folder structure and test files:

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')
// ...

But I always end up with the following error, when I run 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

I tried several things, like prepending the @import file path with a ~, and with a ., but nothing changes. I'm fairly new to webpack and frontend development in general, so I'm somewhat at a loss as to where to look for answers...

Thanks in advance!

Answer 1

it seems that you don't install less, you can check it in your package.json, and then

npm install less --save-dev.