Angular-cli: Setting the global default to scss does not affect new projects.

[cedvdb]

The current default is css and one needs to specifically tell the cli to do scss.

First of all I don't see any benefit in using css over scss.
Secundo, it seems it would fit right in the cli philosophy to be opinionated on what to use.
Third, it's easy to switch, but inconvenient if for example you start a project forgetting to specify it should be sass (which is 100% of the time personally), create 4 components from the get go. Now you have to go into each component.ts file and change the style extensions, change every css to scss and change cli.json.
Fourth, most people using css don't really mind having .scss files, while the other way around will throw error if you use variables or other scss features.

The cli is opinionated, why not be opinionated on this ?

[darko711]

You can configure the ng-cli to use scss by default with

ng set defaults.styleExt scss

[cedvdb]

You can configure the ng-cli to use scss by default with

ng set defaults.styleExt scss

If the default was .scss and I wanted to use css features, I would have to type nothing, that's kind of my point. If there aren't any objection in having .scss over .css why not do it ?

[clydin]

You can also set the default globally so that all new projects for the user will use the set default. This works for other default options as well.

As to why CSS is the default:
1) It is the actual stylesheet standard
2) It is easy to switch the default if desired (before or after project creation)
3) It does not require a preprocessor (which otherwise may or may not be installed by default)
4) since it's universally supported, it hopefully prevents bike shedding

[yarrgh]

@clydin how would you set scss as the global default? My attempts have been fruitless. I've tried ng set --global defaults.styleExt scss which is accepted, but doesn't seem to be applied when running ng new. Still generates css files.

[cedvdb]

@clydin do you mean ng set defaults.styleExt scss --global ? That does not work for me.

It is the actual stylesheet standard

The default javascript is javascript yet ts has been chosen by the angular team and the cli rolls with it. It might not be a fair comparison but it seems to hint to the community: "hey, you should use that because it's awesome, you can do this and that on top of vanilla js". "You should use scss because it's awesome too, you can do this and that on top of vanilla css" doesn't seem too far fetched imo. I know the comparison is not the best because angular is very much designed with typescript in mind, but I still think my argument is valid.

It is easy to switch the default if desired (before or after project creation)

That works the other way around too, scss to css (which won't happen if one has the preprocessor installed).

It does not require a preprocessor (which otherwise may or may not be installed by default)

Fair enough.

[filipesilva]

I understand you prefer scss but that is a style issue. Style as in 'tabs vs spaces', not as in 'stylesheets'. I'm just not gonna get into that sort of discussion at all.

But I do agree that setting the global should do that. I'll reword your title to reflect it and label it as a ~feature request~ bug.

[cedvdb]

Thank you very much.

'tabs vs spaces'

That's an unfair comparison. Tabs vs space is a binary concept while scss is for the most part a super set of css. However I understand the aforementioned reasons why it's not implemented.

[lucypoly]

@yarrgh is your problem resolved?

[MichaelMarkieta]

This ng set defaults.styleExt scss --global does not work @lucypoly

Michaels-Air:Sites michaelmarkieta$ ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0
node: 6.10.2
os: darwin x64

Michaels-Air:Sites michaelmarkieta$ ng set --global defaults.styleExt scss
Michaels-Air:Sites michaelmarkieta$ cat /Users/michaelmarkieta/.angular-cli.json
{
  "defaults": {
    "styleExt": "scss"
  }
}
Michaels-Air:Sites michaelmarkieta$ ng new markieta
installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'markieta' successfully created.
Michaels-Air:Sites michaelmarkieta$ cat markieta/.angular-cli.json 
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "markieta"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

[MichaelMarkieta]

However, this following does work. Not sure if the previous comment's method is supposed to work or not...

Michaels-Air:Sites michaelmarkieta$ ng new markieta --style=scss
installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.scss
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.scss
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'markieta' successfully created.
Michaels-Air:Sites michaelmarkieta$ cat markieta/.angular-cli.json 
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "markieta"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

[filipesilva]

@Brocco can you take a look?

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