Buefy scss works in development but is missing after build

[reasv]

Hello, I have a problem using this module. My configuration inside nuxt.config.js looks like this:

['nuxt-bulma-slim', {
      variablesPath: 'assets/css/cosmo/_variables.scss',
      additionalPaths: ['node_modules/buefy/src/scss/buefy.scss', 'assets/css/main.scss']
    }],

as you can see it loads the Buefy SCSS, then my CSS, and also a variable files for Bulma. During development (run dev) everything works fine. However when I nuxt build, it seems like the Buefy CSS are missing, or at least my site (well the Buefy parts) is broken exactly as if they weren't there. I tried removing the buefy.scss from the additionalPaths to see if there was any difference at all, but there wasn't. I tried to @ import the buefy scss in main.scss, but there was no difference there either.

I'd like to specify that my other CSS, including the variables, seem to work fine.

Thanks.

[codebender828]

@reasv Were you able to resolve this? I'm encountering the same problem @mustardamus Is there a way that this package is able to work with buefy?

[Liwoj]

Purgecss (which is used by nuxt-bulma-slim do strip unused css) works by scanning HTML file (or VUE or really any other text file), extracting CSS selectors and then filter passed CSS to include only selectors used in HTML. Buefy hides usage of Bulma CSS after components (there are no Bulma css selectors in your Vue files) so Purgecss sees it as unused and removes it completely.

It's working in dev mode because this module doesn't run Purgecss in dev

You can add Buefy components into srcGlobs option of this module and also add some whitelistPatterns (see here for details) to resolve your issue.