CODEWITHSUNDEEP
nuxt.jsstylus
Léo Coletta
Léo Coletta

Reputation: 1269

Nuxt can't load stylus file

I am trying to load a stylus file within nuxt.

First I installed the stylus package using npm i -D stylus stylus-loader

Then I created a file called app.styl in the assets/style folder :

@require '~vuetify/src/stylus/settings/_colors'
$theme := {
  primary:     $blue.darken-2
  accent:      $blue.accent-2
  secondary:   $grey.lighten-1
  info:        $blue.lighten-1
  warning:     $amber.darken-2
  error:       $red.accent-4
  success:     $green.lighten-2
}

// Import Vuetify styling
@require '~vuetify/src/stylus/main'

.page
  @extend .fade-transition

Then I added this to the css array in nuxt.config.js :

  /*
  ** Global CSS
  */
  css: [{ src: '~assets/style/app.styl', lang: 'styl'}],

But then nuxt.js is throwing an error in build : 

× error friendly-errors » Failed to compile with 1 errors
> log friendly-errors » This dependency was not found:
> log friendly-errors » * ..\assets\style\app.styl in ./.nuxt/App.js
> log friendly-errors » To install it, you can run: npm install --save ..\assets\style\app.styl

In my package.json I have the version of nuxt to ^2.3.1, stylus to ^0.54.5 and stylus-loader of ^3.0.2.

Full link to package.json and nuxt.config.js

Can you find what is wrong with my setup using these informations ?

Upvotes: 0

Views: 1831

Answers (3)

Arun Panneerselvam
Arun Panneerselvam

Reputation: 2335

A solution from issue discussion nuxt issue with ref to webpack stylus options and for nuxt latest (2.14.7),

extend webpack configuration mapping all loaders,

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)
      }) 
    },

this imports the files and include stylus folder as well.

Upvotes: 0

salman kashfy
salman kashfy

Reputation: 3

This line worked for me. in nuxt.config.js

css: ['~assets/app.styl']

Upvotes: 1

Mahamudul Hasan
Mahamudul Hasan

Reputation: 2823

Nuxt asset folder path should be like this for nuxt js version 2

 /*
  ** Global CSS
  */
  css: [{ src: '~/assets/style/app.styl', lang: 'styl'}]

I hope it will solve your problem

Upvotes: 1

Related Questions