Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dart Sass support as a stylesheet preprocessor option #1782

Closed
rayfoss opened this issue Jul 7, 2018 · 9 comments · Fixed by #3321
Closed

Dart Sass support as a stylesheet preprocessor option #1782

rayfoss opened this issue Jul 7, 2018 · 9 comments · Fixed by #3321

Comments

@rayfoss
Copy link
Contributor

@rayfoss rayfoss commented Jul 7, 2018

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

This comment has been minimized.

Copy link
Member

@LinusBorg LinusBorg commented Jul 7, 2018

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.

@Akryum Akryum added the enhancement label Jul 7, 2018
@Gnuk

This comment has been minimized.

Copy link

@Gnuk Gnuk commented Jul 7, 2018

As I can see, in webpack-contrib/sass-loader#435, it's not currently supported inside sass-loader.

The merge request webpack-contrib/sass-loader#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:

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

@LinusBorg

This comment has been minimized.

Copy link
Member

@LinusBorg LinusBorg commented Jul 7, 2018

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.

@LinusBorg LinusBorg added the upstream label Jul 9, 2018
@rayfoss

This comment has been minimized.

Copy link
Contributor Author

@rayfoss rayfoss commented Jul 15, 2018

@LinusBorg webpack-contrib/sass-loader#573 is the loader

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

@LinusBorg

This comment has been minimized.

Copy link
Member

@LinusBorg LinusBorg commented Jul 16, 2018

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

@rayfoss

This comment has been minimized.

Copy link
Contributor Author

@rayfoss rayfoss commented Aug 1, 2018

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

webpack-contrib/sass-loader@bed9fb5

@wujekbogdan

This comment has been minimized.

Copy link

@wujekbogdan wujekbogdan commented Aug 23, 2018

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

@Gnuk

This comment has been minimized.

Copy link

@Gnuk Gnuk commented Aug 24, 2018

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

This comment has been minimized.

Copy link

@beary beary commented Sep 29, 2018

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"
}
@sodatea sodatea added this to To do in January Update via automation Jan 15, 2019
@sodatea sodatea moved this from To do to In progress in January Update Jan 15, 2019
@sodatea sodatea moved this from In progress to Needs review in January Update Jan 17, 2019
January Update automation moved this from Needs review to Done Jan 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Linked pull requests

Successfully merging a pull request may close this issue.

6 participants
You can’t perform that action at this time.