Configuring Ant Design with Angular 8 and SCSS

Question

Does anyone have experience setting up Ant Design in an Angular project with SCSS styles? Setting up is not the difficult part but I'm trying to override the variables that Ant Design exposes in their design system. The problem is that they use .less files for their styling and I'm not sure how to use that in unison with scss.

I have seen some examples for React projects. But angular creates some other issues because it processes the scss files itself and I'm not sure how to get around it.

I created the project using Angular CLI.

Here's some of the code:

angular.json file

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ant-design-poc": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {  
              "path": "./src/custom-webpack-2.config.js"  
            },
            "outputPath": "dist/ant-design-poc",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/ng-zorro-antd/ng-zorro-antd.less"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "customWebpackConfig": {  
              "path": "./src/custom-webpack-2.config.js"  
            },
            "browserTarget": "ant-design-poc:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ant-design-poc:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ant-design-poc:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "ant-design-poc-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ant-design-poc:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ant-design-poc:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "ant-design-poc",
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }
}

Webpack configuration

const path = require('path');

const AntdScssThemePlugin = require('antd-scss-theme-plugin');

const config = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          AntdScssThemePlugin.themify({
            loader: 'sass-loader',
          }),
        ],
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          AntdScssThemePlugin.themify('less-loader'),
        ],
      },
    ],
  },
  watchOptions: {
    ignored: /dist/,
  },
};


module.exports = config;

Styles.scss file

@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less"; //import ant design style file

$primary-color: #0077ff;

package.json

{
  "name": "ant-design-poc",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "core-js": "^2.5.4",
    "ng-zorro-antd": "^7.5.1",
    "rxjs": "~6.5.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^8.4.1",
    "@angular-devkit/build-angular": "^0.803.20",
    "@angular/cli": "~8.3.20",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "antd-scss-theme-plugin": "^1.0.8",
    "babel-loader": "^8.0.6",
    "codelyzer": "^5.0.1",
    "css-loader": "^3.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "less-loader": "^5.0.0",
    "node-sass": "^4.13.0",
    "protractor": "~5.4.0",
    "sass": "^1.23.7",
    "sass-loader": "^7.0.1",
    "style-loader": "^1.0.1",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.5.3"
  }
}

This is the error that I get when I try to build the project:

ERROR in ./node_modules/ng-zorro-antd/ng-zorro-antd.less (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/less-loader/dist/cjs.js??ref--16-3!./node_modules/style-loader/dist!./node_modules/css-loader/dist/cjs.js??ref--20-1!./node_modules/antd-scss-theme-plugin/build/dist/lib/antdLessLoader.js??ref--20-2!./node_modules/ng-zorro-antd/ng-zorro-antd.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):


var content = require("!!../css-loader/dist/cjs.js??ref--20-1!../antd-scss-theme-plugin/build/dist/lib/antdLessLoader.js??ref--20-2!./ng-zorro-antd.less");
          ^
Unrecognised input
      in /Users/shotbyms/Work/Zenhomes-Experiments/ng-ant-design-poc/ant-design-poc/node_modules/ng-zorro-antd/ng-zorro-antd.less (line 1, column 12)
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./node_modules/style-loader/dist!./node_modules/css-loader/dist/cjs.js!./node_modules/antd-scss-theme-plugin/build/dist/lib/antdSassLoader.js??ref--19-2!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less"; //import ant design style file
^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var content = requi"
      in /Users/shotbyms/Work/Zenhomes-Experiments/ng-ant-design-poc/ant-design-poc/src/styles.scss (line 1, column 1)

Does anyone have any experience with this? How can I use the theme and use scss with it at the same time?

Appreciate all the help, thank you in advance :)

You can't import `less` into `scss`. They are not compatible — Ling Vu, Dec 06 '19 at 15:23
You can change the project to process `less` instead of `scss` in the `angular.json` file `"@schematics/angular:component": { "style": "scss" }` — Ling Vu, Dec 06 '19 at 15:27
why not just edit the primary colors the the theme.less file? — shahidfoy, Dec 06 '19 at 16:07
@LingVu I tried that. That doesn't work. And that's exactly the point that I need to use them together. I know they're not compatible but is there a way to tell webpack to take my scss styles and variables and convert them into less compatible? My project currently uses scss (and it's a super big project so I cannot switch to less). And Ant Design uses less - so not sure how to approach this — maham.shahid, Dec 09 '19 at 13:23
@shahidfoy Because my project uses scss and I can use less to modify it but then it cannot be integrated with my current structure — maham.shahid, Dec 09 '19 at 13:28
@maham.shahid have you got any alternative way to do the same? — Mangesh Bhapkar, Feb 26 '20 at 08:48

score 2 · Answer 1 · answered Jan 20 '20 at 13:22

According to your configuration, you missed the part of passing options to the plugin. Here are 2 things you can try:

Add the options to the less-loader to enable javascript
Initialize the plugin with the path of your theme.scss file

./webpack.config.js

{
    module:{
        ...// other rules
        {
            test: /\.less$/,
            use: [
                'style-loader',
                'css-loader',
                AntdScssThemePlugin.themify({
                    loader: 'less-loader',
                    options: {
                        javascriptEnabled: true,
                        relativeUrls: false,
                    },
                }),
            ],
        },
    },
    plugins: [
        ...// other plugins configurations
        new AntdScssThemePlugin(path.join(__dirname, 'src/assets/theme/theme.scss')),
    ],
}

score 2 · Answer 2 · answered Feb 19 '20 at 01:11

This mehthod worked for me can check the documentaion here.

https://ng.ant.design/docs/customize-theme/en

Without schematics#

Create a standalone less file named theme.less in src folder, and add the path of it to the list of styles in angular.json file.

... "styles": [ ... "src/theme.less" ... ] ... Here is an example of theme.less

The base color is changed to #f5222d in the example below.

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

// -------- override less var ----------- @primary-color : #f5222d;

score 0 · Answer 3 · answered Dec 23 '19 at 06:29

0

Remove @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less"; //import ant design style file style.scss from style.scss

and modify angular.json like this and try

"styles": [
              "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
              "src/styles.scss"
            ],

answered Dec 23 '19 at 06:29

Roshani

41
5

Hey. Thanks for the answer. Yes, this fixes the issue with the build of course but it's not the solution for customizing ant-design theme with scss sadly. – maham.shahid Dec 30 '19 at 09:39

Configuring Ant Design with Angular 8 and SCSS

3 Answers3