search

trimox / angular-mdc-web

Angular wrapper for Material Design (Web) Components
https://trimox.github.io/angular-mdc-web
MIT License
518 stars 87 forks source link

@use in .scss files is not working #2189

Closed RikEskes closed 3 years ago

RikEskes commented 4 years ago

Describe the bug Following the getting started guide, and also whilst using the template from StackBlitz, it seems that implementing @use in scss files to include the styling from the @material library is not working at it should.

To Reproduce Steps to reproduce the behavior:

  1. Go to 'https://stackblitz.com/edit/angular-mdc-kwwzgt' https://stackblitz.com/edit/angular-mdc-agnnan
  2. Look at the styling of both the button and the checkbox.
  3. Go to 'https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/button-demo/api' or 'https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/button-demo/api'
  4. Compare their styling to the styling in the Stackblitz demo.

Expected behavior The styling for the button and the checkbox should be the same as shown in the demo from the corresponding components.

What Angular MDC version are you using? 6.0.0-canary.2 - Stackblitz project 5.1.0 - Local project

What OS are you using?: MacOS Catalina 10.15.4 Windows 10

What browser(s) is this bug affecting?: Safari 13.1 Google Chrome 80.0.3987.162 Firefox 74.0

Extra info I asked this question in a bit of a broader sense on StackOverflow as well, you can follow it here: https://stackoverflow.com/questions/60995662/why-is-use-in-my-scss-files-not-working-in-my-angular-9-1-0-project

mujirushi commented 4 years ago

Here is the link to the sass-loader ticket, of which I think is related. There is a workaround for now with the webpack config. https://github.com/webpack-contrib/sass-loader/issues/804

RikEskes commented 3 years ago

I have finally been able to solve this issue.