Angular 8およびSCSSを使用したAnt設計の構成

Question

AngularプロジェクトでSCSSスタイルを使用してAnt Designを設定した経験はありますか？設定は難しい部分ではありませんが、Ant Designが設計システムで公開する変数をオーバーライドしようとしています。問題は、彼らが.lessファイルのスタイル設定のため、scssと一緒に使用する方法がわかりません。

Reactプロジェクトの例をいくつか見ましたが、angularは、scssファイル自体を処理するため、他の問題を引き起こします。それ。

Angular CLIを使用してプロジェクトを作成しました。

次にコードの一部を示します。

angular.jsonファイル

{
  "$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構成

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ファイル

@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"
  }
}

これは、プロジェクトをビルドしようとしたときに発生するエラーです。

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)

誰かこれについて何か経験がありますか？どうすればテーマとscssを同時に使用できますか？

すべての助けに感謝します、事前にありがとう:)

Answer 1

私のために働いたこの方法は、ここでドキュメントをチェックできます。

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

回路図なし＃

Srcフォルダーにtheme.lessというスタンドアロンのlessファイルを作成し、そのパスをangular.jsonファイルのスタイルのリストに追加します。

... "styles"：[... "src/theme.less" ...] ...以下は、theme.lessの例です。

以下の例では、ベースカラーが＃f5222dに変更されています。

// --------公式のlessファイルをインポート----------- @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";

// --------以下の変数をオーバーライド----------- @ primary-color：＃f5222d;

Answer 2

削除@ import "../node_modules/ng-zorro-antd/ng-zorro-antd.less"; // antデザインスタイルファイルをインポートしますstyle.scss style.scssから

このようにangular.jsonを変更して試してください

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