2

I'm trying to create a css file using the following client.scss file. I'm getting compilation errors.

@use '../../../node_modules/@angular/material' as mat;
@use '../../../node_modules/@angular/material/theming';

$branding-url-root: 'https://localhost:8080/resources/';
$brand-font: 'montserrat';
$brand-primary-color: #037fb0;

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap');

$custom-typography: mat.define-typography-config(
        $font-family: $brand-font+', sans-serif'
);

body {
  font-family: $brand-font;
}

@include mat.core($custom-typography);
@include mat.all-legacy-component-typographies();
@include mat.legacy-core($custom-typography);

$md-client: (
        50 : #E1F0F6,
        100 : #B3D9E7,
        200 : #81BFD8,
        300 : #4FA5C8,
        400 : #2992BC,
        500 : transparentize($brand-primary-color, 0.0),
        600 : transparentize($brand-primary-color, 0.0),
        700 : #026CA0,
        800 : #026297,
        900 : #014F87,
        A100 : #B3DBFF,
        A200 : #80C2FF,
        A400 : #4DAAFF,
        A700 : #349EFF,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #ffffff,
                400 : #ffffff,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$client-app-primary: mat.define-palette($md-client);
$client-app-warn:    mat.define-palette($md-client);
$client-app-theme:   mat.define-light-theme($client-app-primary, $client-app-primary, $client-app-warn); //, $client-app-accent, $client-app-warn);

app-header #header-toolbar.mat-toolbar{
  display: none;
  background-image: url($branding-url-root+'public/client_Logo.png');
}

app-header #product-name {
  color: #505050;
}

@include mat.all-legacy-component-themes($client-app-theme);

.mat-stroked-button:not([disabled]) {
  border-color: $brand-primary-color;
  border-width: 2px;
}

Following are the commands that I ran for compiling scss file.

npm install
npm install @angular/material@15.2.5
npm install @angular/cdk@15.2.5
npm install -g sass@1.62.1
sass client.scss brand-theme.css

Error message:

drwxr-xr-x 8 root root  4096 May 31 04:53 node_modules
-rw-r--r-- 1 root root 43311 May 31 04:53 package-lock.json
-rwxr-xr-x 1 root root  2167 May 31 05:00 client.scss
sh-4.2# sass client.scss brand-theme.css
Error: Can't find stylesheet to import.
  ╷
2 │ @use '@material/button/button' as mdc-button;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../node_modules/@angular/material/button/_button-theme.scss 2:1               @use
  ../node_modules/@angular/material/core/density/private/_all-density.scss 2:1  @forward
  ../node_modules/@angular/material/_index.scss 18:1                            @use
  client.scss 1:1                                                               root stylesheet

Could please help me in fixing the issue?

UPDATE 07-June-2023:

I have simple abc.scss which the following content:

@use '@angular/material' as mat;
@include mat.core();

Created config.sassrc file with the following content:

{
    "includePaths": [
        "./node_modules"
    ]
}

and the package.json file:

{
  "name": "fol1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/material": "^15.2.9"
  }
}

Here is the folder structure that I have:

enter image description here

Here is the error message which says Can't find stylesheet to import enter image description here

Now when I try to update the abc.scss file to include relative path to include node_modules

@use './node_modules/@angular/material' as mat;
@include mat.core();

then I get this new error enter image description here

I think config.sassrc is not working. As you said main problem is that sass is not able to find the node_modules folder to import style sheets. Can you help me if I'm missing something?

0

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.