Error when importing from node_modules in my styles.scss

[stefdelec]

Hi,

I am working on an angular 4 projet. I am trying to import from node_modules mdb.scss in order to override default variable. My styles.scss is aat the root of the project asin angular-cli new project.

Here is my styles.scss

/* You can add global styles to this file, and also import other style files */
$primary: red;
$font-family-base: "Comic Sans MS", cursive, sans-serif;
@import "~mdbootstrap/sass/mdb";

Here is one of the error :

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/li
                                                                                                                                                                         b/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
                                                                                                                                                                                                                                         Module not found: Error: Can't resolve '../font/roboto/Roboto-Thin.woff2' in 'C:\Users\myusername\Desktop\PROJECT-NAME\src'
resolve '../font/roboto/Roboto-Thin.woff2' in 'C:\Users\myusername\Desktop\PROJECT-NAME\src'
  using description file: C:\Users\myusername\Desktop\PROJECT-NAME\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        after using description file: C:\Users\myusername\Desktop\PROJECT-NAME\package.json (relative path: ./src)
using description file: C:\Users\myusername\Desktop\PROJECT-NAME\package.json (relative path: ./font/roboto/Roboto-Thin.woff2)
no extension
Field 'browser' doesn't contain a valid alias configuration
        C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2 doesn't exist
                                                                                                          .ts
                                                                                                          Field 'browser' doesn't contain a valid alias configuration
        C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.ts doesn't exist
                                                                                                                                                                                                                       .js
                                                                                                                                                                                                                       Field 'browser' doesn't contain a valid alias configuration
        C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.js doesn't exist
                                                                                                                                                                                                                                                                                                                                    as directory
                                                                                                                                                                                                                                                                                                                                    C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2 doesn't exist
[C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2]
[C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.ts]
[C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.js]
[C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2]

I have serveral error like this which are all about wrong path.

Expected behavior

I d like to import and override variables as I would do in any bootstrap4 (the scss) project.

Way to reproduce

with angular cli :

1. create a new project with angular cli
2. install mdb as a dep
3. add scss as a style extension
4. import it and try to override variables in styles.scss

[Bloodcast69]

Hello Stefdelec,
Could you try to perform this command in your's terminal?
ng set defaults.styleExt scss

This should set your's styles instead of css to scss.
If this solution won't resolve your's problem, please let me know.
Best Regards,
Damian

[stefdelec]

Hi Damian
It is already set to scss in our angular-cli.json

 "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Stéphane.

[Bloodcast69]

Did you changed every stylesheet name from .css to .scss, and in your's component.ts files stylesUrl from css to scss?

[stefdelec]

Yes, we don't use css.

[Bloodcast69]

C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.js
Is this a proper directory for your's fonts? For default, fonts are contained in node_modules/ng-mdb-pro/assets/font

[stefdelec]

Nope. I didn't define anything actually. I've just imported your scss as you do, without overriding any variables.
I think 'C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.js" is the output from the way you define the path to your fonts ../font\roboto\Roboto-Thin.woff2.js, or something like this ?

[stefdelec]

Or perhaps I don't import it as we should.

For example, if I try to import (from node_modules) :
style.scss
@import "~angular-bootstrap-md/scss/mdb";

I would have an error.

[Bloodcast69]

stefdelec,
I've had some similar problem today's morning, but I've fixed it by changing every extension from .css to .scss and for me everything is okay. Did you changed every .css to .scss?
For example, in starter project:
src/styles.css -> src/styles.scss,
src/app/app.component.css -> src/app/app.component.scss,
src/app/app.component.ts (look for line) styleUrls: ['app.component.css'] and change extension to .scss

If this won't work - please provide me your's environment informations, paste here code of your's angular-cli.json, tsconfig.json, src/tsconfig.app.json files

Best Regards,
Damian

[dawidadach]

Closing issue due to lack if input. @stefdelec if you can provide us with any additional details, feel free to reopen the issue.

[bbmattieu9]

I tried all that was stated in the github documentation but it is not working for me
ERROR in multi ./src/styles.scss ./src/assets/scss/style.css ./node_modules/toastr/build/toastr.min.scss

Module not found: Error: Can't resolve mumspring/src/assets/scss/style.css'

[bbmattieu9]

i have changed the extension from css to scss and also did "styleExt": "css" to "styleExt": "scss"
i even went to node_modules/toastr/build/toastr.min.css to change it to scss...nothing changed

[Bloodcast69]

@bbmattieu9

Could you please describe your problem? What's wrong exactly? This is so old case, so I would like to see your code, then I'll be able to help you.

Please show me the angular.json, package.json files, and file where you're importing the mdb.scss.

Also please provide me with some error logs or something similar.

[iftikhar-ahmad42]

hello there,
i am using mdb-angular 8 version and want to change button colors without changing in node_modules

here is my code in styles.scss

$primary-color: orange;

$mdb-colors: ();
$mdb-colors: map-merge(
(
"primary": $primary-color,
"danger": $danger-color,
"warning": $warning-color,
"success": $success-color,
"info": $info-color,
"default": $default-color,
"secondary": $secondary-color
),
$mdb-colors
);

:root {
// Custom variable values only support SassScript inside #{}.
@each $color, $value in $mdb-colors {
--mdb--#{$color}: #{$value}; // its showing updated colors in browser :root
}
}
@each $name, $color in $mdb-colors {
@include make-button($name, $color);
@include make-outline-button($name, $color);
}

its working but applying default style.

Thanks. let me if there is any solution for this.