trimox / angular-mdc-web

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

This module was already loaded, so it cannot be configured using with. #2142

Closed PabloG6 closed 4 years ago

PabloG6 commented 4 years ago

When customizing the typography styles, sometimes the sass compiler will throw an error which states. ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--15-3!./src/styles.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: This module was already loaded, so it can't be configured using "with". ╷ 3 │ @forward "./functions"; │ ^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/@material/typography/_index.scss 3:1 @use src/styles/components/_typography.scss 2:1 @use /mnt/c/Users/Public/angular-projects/attolink/src/styles.scss 2:1 root stylesheet

typography.scss file

@use "./component-variables"; @use "@material/typography" with ( $font-family: unquote("Cousine, sans-serif"), $mdc-typography-styles-headline1: component-variables.$mdc-typography-styles-headline1, $mdc-typography-styles-headline2: component-variables.$mdc-typography-styles-headline2, $mdc-typography-styles-headline3: component-variables.$mdc-typography-styles-headline3, );

my styles.scss file @use "components/typography"; @use "@material/theme" with ($primary: #6002ee, $secondary: #fff); @use "@angular-mdc/theme/material";

Expected Behavior

The typography components should be changed to display the selected font family.

Environment ~angular-mdc/web@5.1.0 @angular-devkit/architect 0.900.3 @angular-devkit/build-angular 0.900.3 @angular-devkit/build-optimizer 0.900.3 @angular-devkit/build-webpack 0.900.3 @angular-devkit/core 9.0.3 @angular-devkit/schematics 9.0.3 @angular/cdk 9.1.0 @angular/cli 9.0.3 @ngtools/webpack 9.0.3 @schematics/angular 9.0.3 @schematics/update 0.900.3 rxjs 6.5.4 typescript 3.7.5 webpack 4.41.2

trimox commented 4 years ago

@PabloG6 I'd recommend filing an issue upstream in material-components-web; if it's related to usage or a problem with MDC's Sass module system the maintainers are the best source for help.

We can always re-open if needed.