代码之家  ›  专栏  ›  技术社区  ›  Billal Begueradj

如何在nuxt.config.js中添加css加载器和手写笔加载器?

stylus-loader nuxt css-loader nuxt.js javascript
  •  1
  • Billal Begueradj  · 技术社区  · 6 年前

    Nuxt.js 骨架: 

    yarn create nuxt-app myapp

    然后添加css加载器和手写笔加载器: 

    yarn add css-loader
yarn add stylus stylus loader

    然后将它们添加到nuxt.config.js: 

    build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
        config.module.rules.push({
          test: /\.css$/,
          loader: ['css-loader', 'stylus-loader'],
          exclude: /(node_modules)/
        })
      }
    }
  }

    我跑的时候就知道了 yarn run dev : 

    begueradj@begueradj:~/myapp$ yarn run dev
yarn run v1.10.1
$ nuxt


 INFO  Building project

✔ success Builder initialized
✔ success Nuxt files generated


 ERROR  Failed to compile with 4 errors                                                                                                                         16:03:01

 error  in ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& 4:14-403 14:3-18:5 15:22-411
 @ ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css&
 @ ./.nuxt/components/nuxt-error.vue
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& 4:14-405 14:3-18:5 15:22-413
 @ ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
 @ ./.nuxt/components/nuxt-loading.vue
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./components/Logo.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./components/Logo.vue?vue&type=style&index=0&lang=css& 4:14-379 14:3-18:5 15:22-387
 @ ./components/Logo.vue?vue&type=style&index=0&lang=css&
 @ ./components/Logo.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css& 4:14-386 14:3-18:5 15:22-394
 @ ./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css&
 @ ./components/VuetifyLogo.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js



 READY  Listening on http://localhost:3000



 ERROR  Failed to compile with 4 errors                                                                                                                         16:03:02

 error  in ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css& 4:14-403 14:3-18:5 15:22-411
 @ ./.nuxt/components/nuxt-error.vue?vue&type=style&index=0&lang=css&
 @ ./.nuxt/components/nuxt-error.vue
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& 4:14-405 14:3-18:5 15:22-413
 @ ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
 @ ./.nuxt/components/nuxt-loading.vue
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./components/Logo.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./components/Logo.vue?vue&type=style&index=0&lang=css& 4:14-379 14:3-18:5 15:22-387
 @ ./components/Logo.vue?vue&type=style&index=0&lang=css&
 @ ./components/Logo.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css&

Syntax Error: SyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 | 



 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css& 4:14-386 14:3-18:5 15:22-394
 @ ./components/VuetifyLogo.vue?vue&type=style&index=0&lang=css&
 @ ./components/VuetifyLogo.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue?vue&type=script&lang=js&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

    编辑:

    为什么我要将这些加载程序添加到nuxt.config.js中?例如,因为 here similarly 对我所做的(我想)

    1 回复  |  直到 6 年前
        1
  •  1
  •   Anna Koзырева    6 年前

    你的讨论对我有帮助! 

    npm install stylus-loader stylus --save-dev

    就这样。之后,您可以在项目中自动使用手写笔。

    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    Jason Owens  ·  我的html/javascript播放按钮无法播放嵌入的youtube视频
    1 年前
    SlickRed  ·  我无法使用JS关注HTML元素
    1 年前
    Mayron Guedes  ·  如果登录名不在本地存储中,如何重定向页面?
    1 年前
    assembler  ·  Nextjs没有处理发布请求
    1 年前
    PavelB  ·  如何使用Seleniumwebdriver和mocha只运行一个测试文件?
    1 年前
    BADRUM  ·  执行两个获取功能后,如何导航回页面?
    1 年前
    Toniq  ·  javascript为php保存多维数组
    1 年前
    Natalie Smyth  ·  隐藏类只在我试图切换的两个部分中的一个部分上工作
    1 年前
    SkyWalker  ·  在JavaScript中,合并日期-时间序列的有效算法是什么?
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号