Vue-cli: Dart Sass support as a stylesheet preprocessor option

[rayfoss]

What problem does this feature solve?

node-sass is the most painful node dependency in the entirety of the npm ecosystem. Plus dart sass is faster, allows code sharing with docker (no binaries), never breaks installations after a system or node update...

I realize there will be limitations... which I'm willing to work around for the benefits

What does the proposed API look like?

$ vue-cli generate foo

Sass ( node-sass )
Sass ( Dart Sass - Experimental ) *
Less
Stylus

[LinusBorg]

We don't have a hard dependency on node-sass - sass-loadee needs it. Does sass-loadee support dart-sass as well, or does a fork exist or something?

At the end of the day we need a loader for it.

[Gnuk]

As I can see, in https://github.com/webpack-contrib/sass-loader/issues/435, it's not currently supported inside sass-loader.

The merge request https://github.com/webpack-contrib/sass-loader/pull/573 let sass-loader be "implementation-agnostic" but it's not currently merged.

I think it's a good idea to have dart-sass because it's the official package referenced in Sass lang as a npm provider:

• Installation page from Sass lang: https://sass-lang.com/install
• Referenced package is dart-sass: https://www.npmjs.com/package/sass

But I think you'll wait sass-loader support dart-sass if you want webpack support.

[LinusBorg]

Well I'm not sure how using dart sass would work without a loader supporting it, since the whole build process of vue-cli is built around webpack.

[rayfoss]

@LinusBorg https://github.com/webpack-contrib/sass-loader/pull/573 is the loader

it could be implemented as a generator time option... like fountainjs has been doing it... Sass (dart-sass experimental)

[LinusBorg]

Well, that PR hasn't been merged yet, so as of today there's no loader that supports dart -sass, right?

[rayfoss]

The prophecy is upon us:

Rather than always loading Node Sass, this now requires users to pass in
either Dart Sass or Node Sass as an option to the loader.

commit: bed9fb5799a90020d43f705ea405f85b368621d7

https://github.com/webpack-contrib/sass-loader/commit/bed9fb5799a90020d43f705ea405f85b368621d7

[wujekbogdan]

IMO dart-sass should be the default sass compiler because now it's the official sass compiler.

[Gnuk]

It's also my opinion but like I see after the merge request of the sass loader, node-sass still the default implementation proposed. It could be a choice during creation from vue cli I think.

[beary]

I tried to use dart-sass according sass-loader's example and it works well.

/* vue.config.js */
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass')
      }
    }
  }
}

"devDependencies": {
  "@vue/cli-plugin-babel": "^3.0.4",
  "@vue/cli-plugin-typescript": "^3.0.4",
  "@vue/cli-service": "^3.0.4",
  "sass": "^1.14.1",
  "sass-loader": "^7.0.1",
  "typescript": "^3.0.0",
  "vue-template-compiler": "^2.5.17"
}