Angular cli 7.1.4 提取的 styles.css 文件意外字符

Question

我在我的 Angular 应用程序中使用 Angular cli 7.1.4 和 bootstrap 4.2.1。

Angular.json 文件：

"architect": {
   "build": {
      "options": {
          "styles": [
          "node_modules/bootstrap/scss/bootstrap.scss",              
          "src/styles.scss"
        ]
      },
     "configurations": {
        "localrelease": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.localrelease.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"
            }
          ]
        }
   }
}

styles.scss：

// Theme variables, must be included before the libraries to allow 
   overriding defaults   

// 3rd party libraries
@import "~bootstrap/scss/bootstrap";

问题是当我使用 'ng build --configuration localrelease' 构建项目时，浏览器控制台输出以下错误：

styles.9d1b9f2acfda72d82b52.css:6 Uncaught SyntaxError: Unexpected token :

styles.css：

/*!
 * Bootstrap v4.2.1 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT         
  */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8

显然问题来自第 3 方库（引导程序）。谁能解决我做错了什么？将不胜感激。

Answer 1

"styles": [
      "node_modules/bootstrap/scss/bootstrap.scss",              
      "src/styles.scss"
    ]

当您执行@import "~bootstrap/scss/bootstrap"; 时，它会再次添加。尝试删除其中之一。