Configuration de Ant Design avec Angular 8 et SCSS
Quelqu'un a-t-il de l'expérience dans la configuration de Ant Design dans un projet Angular avec des styles SCSS? La configuration n'est pas la partie difficile, mais j'essaie de remplacer les variables que Ant Design expose dans leur système de conception. Le problème est qu'ils utilisent .less pour leur style et je ne sais pas comment l'utiliser à l'unisson avec scss.
J'ai vu quelques exemples pour React projets. Mais angular crée d'autres problèmes car il traite les fichiers scss lui-même et je ne sais pas comment me déplacer il.
J'ai créé le projet en utilisant Angular CLI.
Voici une partie du code:
angular.json fichier
{
"$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"
}
}
}
configuration Webpack
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 fichier
@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"
}
}
C'est l'erreur que j'obtiens lorsque j'essaye de construire le projet:
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)
Est-ce que quelqu'un a de l'expérience avec ça? Comment puis-je utiliser le thème et utiliser scss avec lui en même temps?
Appréciez toute l'aide, merci d'avance :)
Ce mehthod a fonctionné pour moi peut vérifier la documentaion ici.
https://ng.ant.design/docs/customize-theme/en
Sans schémas #
Créez un fichier less autonome nommé theme.less dans le dossier src et ajoutez le chemin de celui-ci à la liste des styles dans le fichier angular.json.
... "styles": [... "src/theme.less" ...] ... Voici un exemple de theme.less
La couleur de base est changée en # f5222d dans l'exemple ci-dessous.
// -------- importer le fichier officiel moins ----------- @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
// -------- remplacer less var ----------- @ primary-color: # f5222d;
Supprimer @ import "../node_modules/ng-zorro-antd/ng-zorro-antd.less"; // importer le fichier de style de conception de fourmi style.scss de style.scss
et modifiez angular.json comme ceci et essayez
"styles": [
"./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
"src/styles.scss"
],