Question

我的问题与此类似，但是我不明白那里的答案： Webpack Less-Loader with Style-Loader not injecting <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'
     ]
   })
 }

当我在组件的样式标签（LoadingOverlay.vue）中添加“ lang ='less'”时：

<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还很陌生，因此受到了限制

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

将lang =“ less”添加到component.vue中的样式标签后，找不到模块

0 个答案: