Модуль не найден после добавления lang = "less" к тегу style в component.vue - PullRequest
Новая
       20

Модуль не найден после добавления lang = "less" к тегу style в component.vue

1 голос
/ 16 мая 2019

Мой вопрос похож на этот, но я не понимаю ответа там: Webpack Less-Loader с загрузкой Style-Loader

У меня нет «репутации», чтобы комментировать, поэтому я задам новый вопрос.

Я не хочу включать мой .less штраф в мой .js, я просто хочу использовать нотацию 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

Любая помощь очень ценится - спасибо

Я следовал документации и пробовал вышеизложенное, но ограничен, так как я довольно новичок в квазаре и vueJS

Я просто ожидаю, что смогу использовать нотацию lessCSS в своих тегах в шаблонах, макетах, страницах и компонентах

...