如何将 css-loader 和 stylus-loader 添加到 nuxt.config.js 中？

【问题标题】：How to add css-loader and stylus-loader into nuxt.config.js?如何将 css-loader 和 stylus-loader 添加到 nuxt.config.js 中？
【发布时间】：2018-09-30 13:08:58
【问题描述】：

我创建了一个Nuxt.js 骨架：

yarn create nuxt-app myapp

然后我添加css-loader和stylus loader：

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 上，它说安装加载器是不够的，除非你扩展 webpack 配置。为了在 Nuxt 做到这一点，我们必须按照我所做的 similarly 去做（我想）

【问题讨论】：

  • 你不需要在配置中添加加载器。它已经配置好了。你只需要安装加载器
  • 你能提供一个链接来支持你的说法吗？
  • nuxtjs.org/faq/pre-processors虽然错过了手写笔，但需要更新文档
  • 我之前看过那个链接，虽然我对自己的理解没有信心......我认为你是对的，我将进行一次基本测试并回来，谢谢

标签： javascript css-loader nuxt.js stylus-loader


【解决方案1】：

您的讨论对我有帮助！ 我的步骤（如果你有全局手写笔）：

npm install stylus-loader stylus --save-dev

就是这样。之后你就可以在你的项目中自动使用手写笔了。

【讨论】：

    【解决方案2】：

    [相当长的延迟回答。但会帮助某人获得最近的 nuxt 版本 (^2.14)]

    问题讨论中的解决方案nuxt issue 参考webpack stylus options 对于 nuxt 最新版本 (2.14.7)，

    扩展 webpack 配置映射所有加载器，

    build: {
    extend (config, { isDev, isClient }) {
      [].concat(...config.module.rules.find(e => e.test.toString().match(/\.styl/)).oneOf.map(e => e.use.filter(e => e.loader == 'stylus-loader'))).forEach(stylus => { 
        Object.assign(stylus.options, {
          //preferPathResolver: 'webpack',
          sourceMap: true,
          stylusOptions: { 
            //use: ['nib'],
            include: ['~assets/styles'],  //include all styl files from folder
            import: [
              '~assets/style/main.styl',  //your main styl file
            ],
          },
        })
        //console.log(stylus)
      }) 
    },

    这会导入文件并包含 stylus 文件夹。

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2019-04-22
      • 2017-07-21
      • 2017-10-10
      • 2014-10-13
      • 2019-03-23
      • 2018-07-22
      • 2017-06-10
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode