Nuxt.js: How can I use fast-sass-loader with Nuxt?

[liquidvisual]

I'm finding node-sass/sass-loader to be noticeably slow when it comes to preprocessing Bootstrap compared to my old build scripts which used lib-sass.

I've come across fast-sass-loader which may help things, but being new to Nuxt and webpack, I'm not sure how to implement it.

Is there a way to use fast-sass-loader in Nuxt?

_{This question is available on Nuxt.js community (#c1921)}

[clarkdo]

Use build.extend to customize any webpack config you want to add.

Example: https://github.com/nuxt/nuxt.js/blob/dev/examples/custom-build/nuxt.config.js

[liquidvisual]

Sorry for the delay, thank you Clark I will try that.

[jvukovich]

Hey @liquidvisual, did you ever get it working? If so, could you share your configuration? Thanks much!

[liquidvisual]

Hi @jvukovich, no sorry, I was never able to figure it out :(

[jvukovich]

Darn. Thanks! I'll keep fighting with it. :)

[jvukovich]

@liquidvisual I got lucky and managed to get it to work after reading this: https://github.com/nuxt/nuxt.js/issues/1107

fast-sass-loader works for me with this configuration!

var path = require('path')

const fastSassLoader = {
  loader: 'fast-sass-loader',
  options: {
    include: [
      path.resolve(__dirname, 'assets/scss')
    ]
  }
}

function isVueRule(rule) {
  return (rule.test.toString() === '/\\.vue$/')
}

function isSassRule(rule) {
  return (['/\\.sass$/', '/\\.scss$/'].indexOf(rule.test.toString()) !== -1)
}

module.exports = {
  build: {
    extend(config, ctx) {
      config.module.rules.forEach((rule) => {
        if (isVueRule(rule)) {
          rule.options.loaders.sass.push(fastSassLoader)
          rule.options.loaders.scss.push(fastSassLoader)
        }

        if (isSassRule(rule)) {
          rule.use.push(fastSassLoader)
        }
      })
    }
}

[liquidvisual]

@jvukovich Great work! Thanks so much for sharing :)

How is the speed now? Is it a noticeable improvement?

[jvukovich]

Thanks! Welp, I am using Bootstrap SASS and see no significant improvement in compilation times with fast-sass-loader. :(

[liquidvisual]

@jvukovich Aw nuts, that's a shame to hear! Slow SASS compilation was ultimately the reason I had to abandon Nuxt and return to Jekyll.

[jvukovich]

Yeah, I know, right?! I did a bunch more tests today and switched back to the normal sass-loader. I just set cssSourceMap: false and it loads in about 10 seconds now (was 20+ seconds). fast-sass-loader was taking 40+ seconds, even with cssSourceMap set to false and include paths covering all possible/used scss locations. 10 seconds still sucks, though. Not happy at all. My project isn't even that big, but I want to use Bootstrap's SASS!

[jvukovich]

Update: I upgraded to the latest version of nuxt (v1.1.1) and sass compilation is super fast now. Hurrah!

[liquidvisual]

@jvukovich That's awesome news! Thanks for letting me know. :) Are you using the regular sass-loader or fast-sass-loader?

[jvukovich]

Whoops, sorry. It's the regular sass-loader. :)

[XavierLeTohic]

Any way to use fast-sass-loader with Nuxt.js 2.1? It seems to not work.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.