Scss Styles

[vigneshbarani24]

What problem does this feature solve?

Hello, Your Repository is super Awesome but then i can find it being in LESS.I also came across an issue in Angular CLI which breaks when using Angular CLI. How good are we on it ? Can i start using my Angular App using your Awesome Repo. ? Will it have any problem in the future ?

What does the proposed API look like?

Given the SCSS styling, Angular CLI supports default styling methods. I believe that could help User big time

[vlados]

You can include the compiled css from the library into the angular project
node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css

[wzhudev]

@Vbboi24 Our styles files are derived from antd. And to my knowledge, they are not going to provide SCSS files because that acquires a lot of work.

You can use SCSS with less. And if you are not to going to override some variables in theme files, you can follow @vlados 's suggestion.

I think this issue duplicates the older issues.

[vlados]

Also https://intoli.com/blog/antd-scss-theme-plugin/

[ybarbaria]

Any news about this issues ? It's very annoying this less config. Most of the developer use scss with angular.

[vthinkxie]

https://ng.ant.design/docs/faq/en#why-ng-zorro-antd-use-less%EF%BC%9F-can-i-use-sass-instead%EF%BC%9F

[ybarbaria]

https://ng.ant.design/docs/faq/en#why-ng-zorro-antd-use-less%EF%BC%9F-can-i-use-sass-instead%EF%BC%9F

I know we can use sass and less together, but I want to import some of your less var or class into some of my style in order to override some other library. So how I can import a less var into sass files => is not possible :)

[giant-robot]

I know we can use sass and less together, but I want to import some of your less var or class into some of my style in order to override some other library. So how I can import a less var into sass files => is not possible :)

@ybarbaria you can define the less vars as custom css properties and use them in your scss files ;)

For example:

angular.json

...
  "styles": [
    ...
    "src/theme.less",
    "src/styles.scss"
    ...
  ]
...

theme.less

@import "node_modules/ng-zorro-antd/ng-zorro-antd.less";

:root {
  --nz-primary-color: @primary-color;
}

styles.scss

button {
  background: var(--nz-primary-color);
}

[llccing]

this can override default theme color.
the theme.less like this:

// Custom Theming for NG-ZORRO
// For more information: https://ng.ant.design/docs/customize-theme/en
@import '../node_modules/ng-zorro-antd/ng-zorro-antd.less';

// Override less variables to here
// View all variables: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less

@primary-color: #ff524d;

[wassim-k]

I've written sass-less-importer and we've been using it in production with ng-zorro ant-design for 2+ years, hopefully others will find it useful too.