search

dumberjs / dumber-gist

A lightweight online IDE to write JS SPA prototypes in your own GitHub gists.
https://gist.dumber.app
MIT License
28 stars 2 forks source link

Support `@use` of vendor styles in scss #39

Open MaximBalaganskiy opened 4 years ago

MaximBalaganskiy commented 4 years ago

Required, for example, for Google Material Design. Example gist

3cp commented 4 years ago

Going to experiment https://sass-lang.com/documentation/js-api#importer https://github.com/medialize/sass.js/blob/HEAD/docs/api.md#the-importer-callback

3cp commented 4 years ago

Running into some weird sass.js behaviour I don't understand.

Also, @use is blocked by medialize/sass.js#127, @import might work if I can fix my current implementation.

Npm module sass.js is currently the only sass implementation can run in browser.

3cp commented 4 years ago

Published some code. You might need to clean up browser cache.

The @use would not work because it's missing from sass.js npm module. The line is simply ignored. You can use @import "@material/button/mdc-button"; but sass complains you have a syntax error in @material/button/mdc-button.scss

@include mixins.core-styles;
MaximBalaganskiy commented 4 years ago

yeah... because google uses @use which is ignored

3cp commented 4 years ago

That's unfortunate.

MaximBalaganskiy commented 4 years ago

Would it be possible to replace @use with @import during bundling?

3cp commented 4 years ago

Definitely possible, but I am not willing to. Because sass @use and @import are semantically different (although I don't know enough details), I don't want to implement wrong hacking.

When I got time, I would have a look into sass.js to see what stopped it from supporting @use.

3cp commented 4 years ago

I think we can leave this issue open. It's still to be solved from sass.js.