时间戳

首页 > 解决方案 > 使用 Angular 8 和 SCSS 配置 Ant Design

angular - 使用 Angular 8 和 SCSS 配置 Ant Design

问题描述

有没有人有在具有 SCSS 样式的 Angular 项目中设置 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;

样式.scss文件

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

$primary-color: #0077ff;

包.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？

感谢所有帮助，在此先感谢您:)

标签： angularwebpacksassantdng-zorro-antd

解决方案

根据您的配置，您错过了将选项传递给插件的部分。您可以尝试以下 2 件事：

  1. 添加选项以less-loader启用 javascript
  2. theme.scss使用文件的路径初始化插件

./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')),
    ],
}

推荐阅读