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 :)

Answer 1

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;

Answer 2

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

1. Add the options to the less-loader to enable javascript
2. 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')),
    ],
}

Answer 3

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"
            ],