Как добавить css-загрузчик и стилус-загрузчик в nuxt.config.js? - PullRequest
Новая
       104

Как добавить css-загрузчик и стилус-загрузчик в nuxt.config.js?

0 голосов
/ 30 сентября 2018

Я создаю 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?Потому что, например, в здесь сказано, что установки загрузчика недостаточно, если вы не расширили конфигурацию webpack.И чтобы сделать это в Nuxt, мы должны сделать это аналогично тому, что я сделал (я полагаю)

1 Ответ

0 голосов
/ 12 января 2019

Твоя дискуссия мне помогает!Мои шаги (если у вас есть стилус по всему миру): 

npm install stylus-loader stylus --save-dev

И все.После этого вы можете автоматически использовать стилус в своем проекте.

...