Components: Material schematics doesn't work with configured angular schematics (scss, spec, etc...)

[NorDroN]

Bug, feature request, or proposal:

BUG

What is the expected behavior?

When I've configured the CLI to use scss and skip tests for generated components, I would expect the material schematics to use already defined configuration when generating components (such as the dashboard).

What is the current behavior?

When I try to create material-dashboard it is created with .css instead of .scss and with .spec file

What are the steps to reproduce?

ng new <project-name> --style=scss --skip-tests
ng add @angular/[email protected] <-- I use 6.2.1 because https://github.com/angular/material2/issues/11836
ng generate @angular/material:material-dashboard --name dashboard

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/animations": "^6.0.0",
"@angular/cdk": "^6.2.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/material": "^6.2.1",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",

"@angular/cli": "~6.0.1",

Is there anything else we should know?

I see that command "ng add @angular/material" add only theme file in angular.json

"styles": [
    {
        "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
    },
    "src/styles.scss"
],

May be that command has to add schematic too?

"schematics": {
    "@schematics/material:material-dashboard": {
        "styleext": "scss",
        "spec": false
    },
    ....
}

[yogeshgadge]

pre-built themes are fully baked themes i.e.e they will be css not scss.
This is intentional. Are you expecting indigo-pink.scss ?

PS: I take it back. I think you are talking about the generated dashboard styles which are css not scss which is the issue.

[NorDroN]

I don't mind that pre-built themes are .css. It's normal. If I want use custom theme I can do it.
But I don't understand why when I try to create new material component (dashboard, nav, etc...) I get component with .css.

[rgant]

Seems that for now you must specify --styleext scss when generating the schematics components.

The schema.json for this setting just accepts any file extension it seems.

[amcdnl]

It should be reading from your cli configuration. Can you verify that?

[mackelito]

Sounds like this is a similar issue as https://github.com/angular/material2/issues/12881 ?

[devversion]

Since 5144aa7, we already respect the stylext default option. I will be working on respecting the following supported default options:

• https://github.com/angular/angular-cli/blob/master/packages/schematics/angular/application/index.ts#L111-L120

[gbraga]

What is the current state?
I'm also having the same problem. I only executed two commands:

ng new _my-project_
ng add @ angular / material

And I got this error. What is the official solution?

[johanchouquet]

Hi there,

In Angular v8, I'm still facing this problem. To be noted : I have more than 1 application in my Angular project. I have my initial application in 'src' folder, and the others are in the 'project' folder.

When I do: ng generate @angular/material:nav nav-menu --project=mySecondApp, it generates everything, but uses the 'css' extension by default.

I tried to change the angular.json file, by adding, for the right project, the right schematics, like this:

"schematics" : { "@schematics/material:nav": { "styleext": "scss" } }
By default, in my angular.json I have, at the root level :
"schematics": { "@schematics/angular:component": { "styleext": "scss" } }
So, it should take into account my default preferences for the whole project, right ?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}