Angular-cli: Bug: Components are not generated with scss

[Karasuni]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.4.1
node: 7.10.1
os: linux x64 (Bash on Ubuntu on Windows)

Repro steps.

When creating a new project:

ng new my-project --style=scss
ng g component my-component

=> create src/app/my-component/my-component.component.css (0 bytes)

Same with an existing project:

ng new my-project
ng set defaults.styleExt scss
ng g component my-component

=> create src/app/my-component/my-component.component.css (0 bytes)

Desired functionality.

The generate command should generate an .scss file instead of a .css file as mentioned in https://github.com/angular/angular-cli/issues/1177

[shahzadhassan10]

+1

[cedvdb]

They should just make scss the default. All css is valid in scss but not vice versa.

[shahzadhassan10]

use ng new --style scss
instead of
use ng new --style=scss

[AhsanAyaz]

@Karasuni

The correct syntax is ng new --style scss.
Please try. That should work.
I just verified by updating to latest @angular/cli too. It works

[Karasuni]

@shahzadhassan10 Are you sure about that? I just generated a project using --style=scss and it had the flag in .angular-cli.json and generated the default styles.scss and app.component.scss correctly.

[AhsanAyaz]

@Karasuni you're right. --style=scss also generates the project with scss.
Give me a minute to verify the component thingy too.

[shahzadhassan10]

@Karasuni not sure what version of angular cli you are using. But I wasn't able to generate SASS with --style=scss in @angular/cli: 1.4.1

[AhsanAyaz]

@Karasuni verified. It is indeed a bug.
@shahzadhassan10 the bug is not that scss files aren't being generated on creating the project via ng new.
The bug is that when we're creating a component using ng generate component test-component, the style file created is not .scss, it is .css file.

[Karasuni]

$ ng new tmp3 --style scss
  create tmp3/README.md (1095 bytes)
  create tmp3/.angular-cli.json (1124 bytes)
  create tmp3/.editorconfig (245 bytes)
  create tmp3/.gitignore (516 bytes)
  create tmp3/src/assets/.gitkeep (0 bytes)
  create tmp3/src/environments/environment.prod.ts (51 bytes)
  create tmp3/src/environments/environment.ts (387 bytes)
  create tmp3/src/favicon.ico (5430 bytes)
  create tmp3/src/index.html (291 bytes)
  create tmp3/src/main.ts (370 bytes)
  create tmp3/src/polyfills.ts (2480 bytes)
  create tmp3/src/styles.scss (80 bytes)
  create tmp3/src/test.ts (1085 bytes)
  create tmp3/src/tsconfig.app.json (211 bytes)
  create tmp3/src/tsconfig.spec.json (304 bytes)
  create tmp3/src/typings.d.ts (104 bytes)
  create tmp3/e2e/app.e2e-spec.ts (286 bytes)
  create tmp3/e2e/app.po.ts (208 bytes)
  create tmp3/e2e/tsconfig.e2e.json (235 bytes)
  create tmp3/karma.conf.js (923 bytes)
  create tmp3/package.json (1309 bytes)
  create tmp3/protractor.conf.js (722 bytes)
  create tmp3/tsconfig.json (363 bytes)
  create tmp3/tslint.json (3040 bytes)
  create tmp3/src/app/app.module.ts (314 bytes)
  create tmp3/src/app/app.component.scss (0 bytes) <----- Correct!
  create tmp3/src/app/app.component.html (1075 bytes)
  create tmp3/src/app/app.component.spec.ts (986 bytes)
  create tmp3/src/app/app.component.ts (208 bytes)
Installing packages for tooling via npm.

$ cat .angular-cli.json | grep styleExt
    "styleExt": "scss",

$ ng g component my-comp
  create src/app/my-comp/my-comp.component.css (0 bytes)  <--- Sadface :(
  create src/app/my-comp/my-comp.component.html (26 bytes)
  create src/app/my-comp/my-comp.component.spec.ts (629 bytes)
  create src/app/my-comp/my-comp.component.ts (272 bytes)
  update src/app/app.module.ts (398 bytes)

[AhsanAyaz]

Duplicate of #7624

[BenRacicot]

I can confirm that this is happening with 1.4.2

projectname git:(develop) ✗ ng g c follow   
  create src/app/follow/follow.component.css (0 bytes)
  create src/app/follow/follow.component.html (25 bytes)
  create src/app/follow/follow.component.spec.ts (628 bytes)
  create src/app/follow/follow.component.ts (269 bytes)
  update src/app/app.module.ts (2415 bytes)

with my cli set like:

"defaults": {
    "styleExt": "scss"

[Brocco]

This issue is fixed in v1.4.3 via PR #7648

[darthsitthiander]

The problem persists in version 1.4.5 still, just got the issue.

[Maseeharazzack]

"extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https:
//github.com/webpack/extract-text-webpack-plugin for the usage example

Can someone help me on what's wrong in my code ?

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
entry: './src/app/main.ts',
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /.html$/,
loaders: ['html-loader']
},
{
test: /.css$/,
loaders: ['raw-loader']
},
{ // sass / scss loader for webpack
test: /.(sass|scss)$/,
loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
}
],
exprContextCritical: false
},
plugins: [

    new HtmlWebpackPlugin({
        template: 'src/index.html'
    })
]

};

[Reboog711]

Issue persists for me.

Angular CLI: 6.0.1
Node: 8.11.2
OS: win32 x64
Angular: 6.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@ angular-devkit/architect 0.6.8
@ angular-devkit/build-angular 0.6.8
@ angular-devkit/build-ng-packagr 0.6.8
@ angular-devkit/build-optimizer 0.6.8
@ angular-devkit/core 0.6.8
@ angular-devkit/schematics 0.6.1
@ ngtools/json-schema 1.1.0
@ ngtools/webpack 6.0.8
@ schematics/angular 0.6.1
@ schematics/update 0.6.1
ng-packagr 3.0.3
rxjs 6.0.0
typescript 2.7.2
webpack 4.8.3

[chris31389]

This works @angular/cli 6.0.8

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "my-app": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {
                "@schematics/angular:component": {
                    "styleext": "scss"
                }
            },
            ...
       }
   }
}

[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._}