Pull in Bulma mixins - how?

[simplenotezy]

I have tried to pull in Bulma mixins like this:

styleResources: {
	scss: [
		'~/assets/styles/_bulma_variables.scss', // this works
		'~/assets/styles/_variables.scss', // this works
		'~/assets/styles/_variables.scss' // this works
	],
	sass: [
		'@bulma/sass/utilities/mixins.sass' // this doesnt work
	]
},

But when I try to use the mixin in my compoonent, like so:

@include desktop {
	.navbar {
		display: none;
	}
}

It doesn't work, and I get error: SassError: no mixin named desktop

[simplenotezy]

Also tried with:

'~/../node_modules/bulma/sass/utilities/mixins.sass'

And

'bulma/sass/utilities/mixins.sass'

Idea: I think it would be great to have error messages if the file is not found, so it's easier to debug

[simplenotezy]

Perhaps the issue is that I am using <style lang="scss"> in my component; then I just don't know how to use mixins as they are written in SASS; but I'm using SCSS for my project.

[mariapaulinar]

Any solution?

[geongeorge]

I'm facing the same issue and like to find a solution.

I think its cause Bulma is in SASS and our code is in SCSS

I think style-resources module must somehow understand both are kinda the same and include them together to import in both SCSS and SASS

Till then my working solution is :

<style lang="scss" scoped>
@import 'bulma/sass/utilities/mixins.sass';

@include mobile {
  .sidebar-wrapper {
    position: static;
  }
}
</style>

[igolka97]

Simplest workaround:

1. Create assets/utilities.scss locally (its important to use separated file for non-styles stuff like mixins)
2. Paste @import "~bulma/sass/utilities/all"; there (or exactly what you need)
3. Then in nuxt.config.js:
   styleResources: { scss: ['~assets/utilities.scss'], },

[ibdf]

Simplest workaround:

1. Create `assets/utilities.scss` locally (its important to use separated file for non-styles stuff like mixins)

2. Paste `@import "~bulma/sass/utilities/all";` there (or exactly what you need)

3. Then in nuxt.config.js:
   `  styleResources: { scss: ['~assets/utilities.scss'],   },`

Unfortunately this has not worked for me. It looks like it finds the file (no errors there) but I still get variable undefined errors as if the file wasn't there at all. The only way I can get some sort of result is to add the sass file under scss array, but then I get sass parsing errors (which makes sense).

[ibdf]

I will take back what I said above. @igolka97 solution works, but you need to watch out because if the file you are importing is also importing other sass files using aliases, the path might not be what you expect. Instead, I imported each individual bulma utility file (eg. mixins.sass, initial-variables.sass) utilities.scss instead of importing _all.scss.

[rttmax]

@igolka97 solution dosn't work for me. For some reason it resets most of my scss overrides to default values.
For now I'm going to import the mixins into my components when I need them.