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 :)
The application renders fine with a mix of css and scss files. I assume this styleExt parameter is just there for the default component style ( css, scss, less ) file generation when adding components via angular-cli commands.
If you're a lover of SCSS, you'll definitely want to make sure to use it in your Angular applications. Luckily the Angular CLI does all the setup for you! Let's first walk through the file changes that the Angular CLI handles for us and how you can modify existing projects to switch over to SCSS for styling.
Ant Design is a design pattern for enterprise-level products that can be integrated with other front-end frameworks such as Angular, React, or Vue. Ant Design official implementation is released with React but it can be used with other JavaScript frameworks.
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;
According to your configuration, you missed the part of passing options to the plugin. Here are 2 things you can try:
less-loader
to enable javascripttheme.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')),
],
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With