Quasar: [Feature] Add dart-sass (npm sass) support

[hailwood]

Right now there's no nice way to specify that we want to use dart-sass (npm sass) as the implementation. Instead we end up doing something hacking in extendWebpack

extendWebpack(cfg) {
  const scssRule = cfg.module.rules.find(rule => rule.test.toString() === '/\\.scss$/');
  scssRule.oneOf = scssRule.oneOf.map(oneOfRule => ({
    ...oneOfRule,
    use: oneOfRule.use.map(useRule => {
      if (useRule.loader === 'sass-loader') {
        useRule.options.implementation = require('sass');
      }

      return useRule;
    }),
  }));
},

This isn't a great experience.

Instead it would be awesome if similar to how we have build.extractCss we could just add build: { sassImplementation: require('sass') }. or even just build.sassLoaderOptions and we can add it in there.

This should just require adding a new option here
https://github.com/quasarframework/quasar/blob/dev/app/lib/webpack/create-chain.js#L171

And an update to this line
https://github.com/quasarframework/quasar/blob/dev/app/lib/webpack/inject.style-rules.js#L108

E.g.

injectRule(chain, pref, 'scss', /\.scss$/, 'sass-loader', {implementation: pref.sassImplementation})

Or

injectRule(chain, pref, 'scss', /\.scss$/, 'sass-loader', pref.sassLoaderOptions)

I'd submit a PR but I'm not sure what direction we'd like to take this.

[smolinari]

Did you see this?

https://v1.quasar-framework.org/start/how-to-use-vue#CSS-preprocessors

Scott

[hailwood]

Hey @smolinari,

I did see that, and it works perfect for if we want to use node-sass.

But that requires us compiling the native bindings for node-sass if we want to use it as is.

That's why I want to use dart-sass.
So we don't have to compile the native bindings.

[rstoenescu]

Hi @hailwood

Can you ping me on Discord pls? Thanks.

[rstoenescu]

Added quasar.conf.js > build > {stylus,sass,scss,less}LoaderOptions props for convenience.
Will be available in @quasar/app 1.0.0-beta.23.

[mesqueeb]

Node-sass & libsass are... deprecated... 😱 ?
https://sass-lang.com/blog/libsass-is-deprecated

[hawkeye64]

Looks like their recommendation is to use Dart Sass

Reopening this ticket...

[mesqueeb]

One of the maintainers says just to replace 'node-sass' with 'sass':
https://github.com/sass/sass/issues/1739#issuecomment-717479819
🧐

[rstoenescu]

Since node-sass has been deprecated and it's in maintenance only status, replaced node-sass with the recommended sass package.

Will be available in "@quasar/app" v2.2.0 (next version).