Bulma: No mixin named mobile with import grid sass

Created on 26 May 2017  ·  12Comments  ·  Source: jgthms/bulma

Import grid.sass problem

I'am import

@import "bulma/sass/utilities/_all"
@import "bulma/sass/grid/columns"

And I have this problem when import grid/columns

Uncaught Error: Module build failed: 
undefined
          ^
      No mixin named mobile

Backtrace:
    stdin:43
      in C:\repositorios\cepv-webapp\node_modules\bulma\sass\grid\columns.sass (line 43, column 12)
    at Object.<anonymous> (style.css:8)
    at __webpack_require__ (bootstrap 248ea23…:659)
    at fn (bootstrap 248ea23…:83)
    at Object.<anonymous> (columns.sass:4)
    at __webpack_require__ (bootstrap 248ea23…:659)
    at fn (bootstrap 248ea23…:83)
    at Object.<anonymous> (main.js:16490)
    at __webpack_require__ (bootstrap 248ea23…:659)
    at fn (bootstrap 248ea23…:83)
    at Object.<anonymous> (main.js:16531)

Someone have ideia?

pinned

Most helpful comment

You can try importing the mixins into columns.sass:

@import "bulma/sass/utilities/mixins

All 12 comments

  • same issue
 ERROR  Failed to compile with 1 errors                               1:52:07 PM

 error  in ./src/App.vue

Module build failed:
  +mobile
          ^
      No mixin named mobile

Same for me. I'm using the _vue-webpack_ template and I'm not getting any errors when importing other folders of Bulma SASS.

Just wondering if there's any update on this? I'm currently working on a project and because I have the static bulma.css file, 90.6% of my repo is CSS-based. Would be fantastic to be able to only import what's required - the grid.

Thank you, by the way, @jgthms! 😎

Is any one have any idea about how to temp fix this ?

You can try importing the mixins into columns.sass:

@import "bulma/sass/utilities/mixins

same issue on bulma: 0.7.1

Same issue, and I actually can't believe this has not been addressed in literally 2 years.

@Loschcode paste this into columns.sass, remember te set right path
@import "./utilities/mixins"

I had this issue, fixed it by using the line below before any other imports

@import "bulma/bulma.sass";

Just realised that the import I mentioned requires the whole of bulma, lol.
It looks like there some dependency on other packages. Which makes no sense to me, the whole point of the package is to be modular.

I have decided to go down the route of flexboxgrid instead, shame because bulma looked interesting.

I had this issue and it was my fault. I am using bulma modules for a nuxt app. I was only importing the mixins into my general sass file which is just getting included as a normal global style into my app. So to make the mixins available for my vue components I had to define the mixins a a style ressources.

Maybe others are facing this issue due to similar circumstances. Here my is an example of a nuxt.config.js:

```
[...]
/*
** Global CSS
*/
css: [
{ src: '@/assets/css/_reset.sass', lang: 'sass' },
{ src: '@/assets/css/_general.sass', lang: 'sass' } // i was importing the mixins here
]
styleResources: {
sass: [
'assets/css/_variables.sass',
'bulma/sass/utilities/mixins.sass' // but here I only make them useable inside my vue templates
]
}

[...]
`
``

 ERROR  Failed to compile with 1 errors                               1:52:07 PM

 error  in ./src/App.vue

Module build failed:
  +mobile
          ^
      No mixin named mobile

我也是。我正在使用_vue-webpack_模板,并且在导入Bulma SASS的其他文件夹时没有出现任何错误。

请教怎么解决

Was this page helpful?
0 / 5 - 0 ratings

Related issues

swamikevala picture swamikevala  ·  3Comments

dotMastaz picture dotMastaz  ·  3Comments

Laraveldeep picture Laraveldeep  ·  3Comments

bigZ-again picture bigZ-again  ·  3Comments

NurdinDev picture NurdinDev  ·  3Comments