Basic setup

App prefix and sass styles

  • We don't want to have all of our components to be prefixed with a generic app prefix right? We generally want to add our customer prefix. (eg: <sn-user-list> where sn stands for sintra)

  • We want to use sass to manage our styles so we have to rename styles.css in styles.scssand specify that in the cli config.

  • We'd like also that for the new components generated with the cli the styles will be a scss file and we can specify that in the styleExt prop

  • To do that we can use some flags in the ng new --style=scss --prefix=sn

The `angular.json` should look like this (see Angular 6 setup for more details):

{
  ...,
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "sn",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "sn"
    }
  }
}

We should also check the .tslint.json is updated to don't complain with our custom prefix eg: sn the settings are those two

"directive-selector": [true, "attribute", "sn", "camelCase"],
"component-selector": [true, "element", "sn", "kebab-case"],

Last updated

Was this helpful?