更新"@angular-devkit/build-angular"后，style-loader停止工作

Question

为了在Angular 8中动态加载我的样式，我使用以下代码，这个方案是有效的。但是，当我将包"@angular-deficit/build-angular": "^0.800.0"更新为"@angular-deficit/build-angular": "^0.803.21"时，我的设置就失效了，也就是说，应用程序中的所有内容按预期工作，但是样式不再应用。

declare function require(name: string): any;
    ngOnInit() {
        require('style-loader!./file-path');
}

package.json

{
  "name": "latest-frontend-theme",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ngx-loading-bar/core": "^4.2.0",
    "@ngx-loading-bar/router": "^4.2.0",
    "angular2-text-mask": "^9.0.0",
    "crypto-js": "^3.1.9-1",
    "file-saver": "^2.0.2",
    "moment": "^2.24.0",
    "mydatepicker": "^2.6.8",
    "ng2-ckeditor": "^1.2.6",
    "ng2-file-upload": "^1.3.0",
    "ng6-toastr": "^6.0.0",
    "ngx-google-places-autocomplete": "^2.0.4",
    "ngx-slick": "^0.2.1",
    "rxjs": "~6.5.3",
    "rxjs-compat": "^6.5.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.21",
    "@angular/cli": "~8.3.21",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~12.12.21",
    "codelyzer": "^5.2.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~8.5.4",
    "tslint": "~5.20.1",
    "typescript": "~3.4.3",
    "webpack-bundle-analyzer": "^3.6.0"
  }
}

任何形式的帮助都是值得赞赏的。

- Lakhvir Singh

---

请问您能否发布 package.json 文件？ - Plochie

我已经更新了问题并发布了package.json文件。 - Lakhvir Singh

首先尝试两件事情，停止 Angular 应用程序，退出 VS Code，然后启动 VS Code 并再次运行 Angular 应用程序。之后请在此更新。 - Plochie

请问您能解释一下什么是“VS Code”吗？ - Lakhvir Singh

你用的是什么集成开发环境呢？我猜想是Visual Studio Code吧？ - Plochie

Answer 1

今天我遇到了同样的问题，但是仍然无法使用style-loader找到解决方案，所以我想出了一种替代方案，因为这个问题仍然没有答案。

我之前是这样使用style-loader的：

// in the AppComponent
private initTheme(settings: Settings) {

  if (settings.style) {
    // set specific theme 
    require(`style-loader!./../../src/${settings.style.id}-theme.scss`);
  }
  else {
    require(`style-loader!./../../src/default-theme.scss`);
  }
}

我的解决方案是更新此函数，手动应用样式表（作为已处理的CSS文件），如下所示：

// in the AppComponent
private initTheme(settings: Settings) {

  const applyStyleSheet = (styleName: string) => {
    const head = document.getElementsByTagName('head')[0];
    const style = document.createElement('link');
    style.rel = 'stylesheet';
    style.href = `${styleName}.css`;
    head.appendChild(style);
  };

    if (settings.style) {
      // set specific theme
      applyStyleSheet(`${settings.style.id}-theme`);
    }
    else {
      applyStyleSheet(`default-theme`);
    }
  }

为了处理 SCSS 文件，我修改了我的 angular.json 文件，在选项中添加了 extractCss：

"options": {
  "extractCss": true
  ...
}

...并在styles数组中指定要处理但不注入的每个SCSS文件：

"styles": [
  {
    "input": "src/default-theme.scss",
    "bundleName": "default-theme",
    "inject": false
  },
  {
    "input": "src/basic-theme.scss",
    "bundleName": "basic-theme",
    "inject": false
  }
  ...
]
  

- Ponyboy