vuejs2 - 将 lang="less" 添加到 component.vue 中的样式标记后找不到模块

Question

我的问题与这个问题类似，但我不明白那里的答案： Webpack Less-Loader with Style-Loader not injectioning <style> tag

我没有评论的“声誉”，所以我会问一个新问题。

我不想在我的 .js 中包含我的 .less 罚款，我只想在我的布局、模板、页面和组件的标记中使用 LessCSS 表示法。

我已经安装了更少的加载器： $npm install --save-dev less-loader

我已将以下内容添加到我的 quasar.conf.js 文件中：

 extendWebpack (cfg) {
/* EXISTING
   cfg.module.rules.push({
     enforce: 'pre',
     test: /\.(js|vue)$/,
     loader: 'eslint-loader',
     exclude: /node_modules/
   })
*/
// NEW
   cfg.module.rules.push({
     test: /\.less$/,
     use: [
       'vue-style-loader',
       'css-loader',
       'less-loader'
     ]
   })
 }

一旦我将“lang='less'”添加到我的组件（LoadingOverlay.vue）的样式标签中：

<style lang="less">
</style>

运行 quasar dev 时出现以下错误：

 ERROR  Failed to compile with 1 errors                                                                                  12:02:54
 error  in ./src/components/global/LoadingOverlay.vue?vue&type=style&index=0&lang=less&

Module build failed (from ./node_modules/less-loader/dist/cjs.js):


// load the styles
var content = require("!!../../../node_modules/css-loader/index.js!../../../node_modules/less-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingOverlay.vue?vue&type=style&index=0&lang=less&");
          ^
Unrecognised input
      in C:\wamp\www\plenty-mobile\src\components\global\LoadingOverlay.vue?vue&type=style&index=0&lang=less& (line 4, column 12)
 @ ./node_modules/vue-style-loader??ref--9-oneOf-2-0!./node_modules/css-loader??ref--9-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-2-2!./node_modules/less-loader/dist/cjs.js??ref--9-oneOf-2-3!./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/global/LoadingOverlay.vue?vue&type=style&index=0&lang=less& 4:14-539 14:3-18:5 15:22-547
 @ ./src/components/global/LoadingOverlay.vue?vue&type=style&index=0&lang=less&
 @ ./src/components/global/LoadingOverlay.vue
 @ ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/layouts/default.vue?vue&type=script&lang=js&
 @ ./src/layouts/default.vue?vue&type=script&lang=js&
 @ ./src/layouts/default.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./.quasar/app.js
 @ ./.quasar/client-entry.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

非常感谢任何帮助 - 谢谢

我已经按照文档并尝试了上述方法，但由于我对 quasar 框架和 vueJS 很陌生

我只是希望能够在模板、布局、页面和组件的标签中使用 lessCSS 表示法

标签： vuejs2lessquasar-framework