Stencil: SCSS imports doesn't work for third party library

[elmariofredo]

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

@stencil/[email protected] /root/bluma-elements
└── @stencil/[email protected]

I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

look at example repo here https://github.com/elmariofredo/bulma-elements/pull/1 where I'm trying to stencilize material design button. In example I'm importing scss from material design package which is trying to import another scss file from other md package. This will end up with following error

[ ERROR ]  File to import not found or unreadable: @material/theme/_mixins. Parent style sheet:
           /root/bluma-elements/node_modules/@material/button/mdc-button.scss

this issue is well documented under material-components-web project
https://github.com/material-components/material-components-web/issues/351 with resolution to add node_modules to includePaths in scss compiler settings.

Expected behavior:

Can we allow set scss config from stencil config?

Steps to reproduce:

checkout https://github.com/elmariofredo/bulma-elements/pull/1 branch and run npm install && npm start

Related code:

https://github.com/ionic-team/stencil/blob/9f3f347bb6ce4bdd314d86af6e237e29a58c2895/src/compiler/transpile/transpile.ts#L254-L256

Other information:

• https://github.com/material-components/material-components-web/issues/351

[sghoweri]

^ this sort of thing has actually been the biggest reservation I've had with StencilJS (and why the design system I lead up is sticking around with SkateJS... for now).

If the "magic" of Stencil was exposed via a default WebPack config which others could extend or configure to their heart's content this sort of problem (or the dozens of others like including a custom Sass function / plugin that lets us output Sass Maps as JSON data or that we use an off the shelf Sass importer for automatically resolving npm namespaces) wouldn't be much of an issue...

Absolutely love love love the ideas I'm seeing being put into this. Just wish incorporating all this hard work into an existing Gulp / Webpack / Frontend workflow (vs replacing or side stepping) was more approachable. 😞

[elmariofredo]

@sghoweri my experience with SkateJS is quite opposite as when building component library, tooling part could get really complicated and actually could negatively affect development. Therefore I'm happy with StencilJS approach where you can focus on components only as long as they will allow to tweak necessary configs as in this SCSS case. IMHO Webpack is not good fit for library bundling it is possible but feels awkward.

[elmariofredo]

For others who can't wait to tweak scss config in stencil here is naive fix https://github.com/elmariofredo/stencil/commit/116a96532de1b371faccb11fe46725dc533f4ec5 also for this particular case one can use very unexpected hotfix

$ SASS_PATH=node_modules npm start