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:
Here is the error message which says Can't find stylesheet to import
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();
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?