Test fail with sassResource option

[hemulin]

Description

Having a theme.scss file containing some globally defined variables. Using

modules: [
  'nuxt-sass-resources-loader'
],
sassResources: [ './assets/css/theme.scss' ]

Inside any component I can have something like

.container {
  background-color: $main-color;
}

And everything works well.

But running tests, I get:

Module build failed: 
  background: $main-color;
             ^
      Undefined variable: "$main-color"

Followed by

1 test failed

  Init Nuxt.js

  /home/hemulin/workspace/platform/node_modules/nuxt/lib/builder/builder.js:589

  Rejected promise returned by test. Reason:

  Error {
    message: 'Webpack build exited with errors',
  }

Expected behavior

Globally defined scss file will be bundled in the nuxt builder and test to have access to the same variables defined there

Actual behavior

Test fail

Versions

• Nodejs version: [9.6.0]
• Nuxtjs version: [1.4.0]
• nuxt-sass-resources-loader version: [1.2.0]

[anteriovieira]

Hi @hemulin, try to use aliases, please

modules: [
  'nuxt-sass-resources-loader'
],
sassResources: [ '@/assets/css/theme.scss' ]

[hemulin]

@anteriovieira, tried with the @ alias but failed too

More complete stacktrace

ERROR in ./node_modules/css-loader?{"sourceMap":false,"minimize":true,"importLoaders":1,"alias":{"/assets":"/home/hemulin/workspace/platform/assets","/static":"/home/hemulin/workspace/platform/static"}}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-ef294276","scoped":true,"hasInlineConfig":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_m
odules/vue-loader/lib/selector.js?type=styles&index=0!./components/NavHeader.vue
Module build failed: 
  background: $main-color;
             ^
      Undefined variable: "$main-color".
      in /home/platform/components/NavHeader.vue (line 69, column 15)
...

 ✖ Init Nuxt.js Rejected promise returned by test

  1 test failed

  Init Nuxt.js

  /home/hemulin/workspace/platform/node_modules/nuxt/lib/builder/builder.js:589

  Rejected promise returned by test. Reason:

  Error {
    message: 'Webpack build exited with errors',
  }

[hqqxxf]

me too

[anteriovieira]

Please try version 2.0.1.

[anteriovieira]

Hi @hemulin , please try version v2.0.3.

[scottdotau]

I received these errors too, @anterioveira... I resorted to using options syntax but if I have free time today I'll look into it for you. Two issues with same cause I believe (on phone, can't link atm)

[scottdotau]

Hey @anteriovieira, I've had a bit of a look into this and I'm 99% positive this isn't and issue, and it's user error (whoops :) - I fixed my own a few days ago without really thinking about it.

I had a look into https://github.com/anteriovieira/nuxt-sass-resources-loader/issues/15 & https://github.com/anteriovieira/nuxt-sass-resources-loader/issues/17 and had a look into their repositories.

The file names they are providing in their config are wrong, as I suspect they believe they can use _ in filenames in a similar way to SCSS. Maybe this would be something to point out in README as it seems to be a confusing point?

I did the same by copying straight from my .scss - perhaps throw an error if the file isn't found? glob.sync (used by sass-resource-loader) will return an empty array, instead of failing if a file is not found.

No underscore: https://github.com/dutchwebworks/nuxt-learning/blob/feature/nuxt-sass-resources-loader/nuxt.config.js#L57 Underscore: https://github.com/dutchwebworks/nuxt-learning/tree/feature/nuxt-sass-resources-loader/assets/scss/helpers

This is the same in:

No underscore: https://github.com/erichodges/nuxt-bulma-boilerplate/blob/master/nuxt.config.js#L23 Underscore: https://github.com/erichodges/nuxt-bulma-boilerplate/tree/master/scss

[hemulin]

@anteriovieira I apologize but I no longer work on that particular piece of code which caused the issue. If in the future I'll come across the same scenario, I'll be sure to try the updated version and report back with result. Thanks for the update. BW.