如何使用 Angular-Cli“要求”SASS？

Question

根據此， require可以在組件級別被用於CSS分成塊。

但是，以下在使用ng serve ，但在使用ng serve --prod時ng serve --prod 。

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [require('./app.component.scss')],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  title = 'my-app';
}

給定 prod 標志時，根本不會加載 CSS。 這是一個錯誤，還是我遺漏了什么？

Answer 1

這些是分別為 ng serve 和 ng serve --prod 設置的默認標志

Flag                 --dev      --prod
--aot                false      true
--environment        dev        prod
--output-hashing     media      all
--sourcemaps         true       false
--extract-css        false      true

使用 ng serve --prod --extract-css=false 可以做到這一點，假設 extract-css= true 是破壞了你對 css 文件的要求

Answer 2

因此，對於可能偶然發現此問題的任何人，我發現如果不創建手動 Webpack 配置， require就無法正常工作。 我不想這樣做，所以這是我所做的：

在 Angular-CLI JSON 的styles下，我添加了具有定義輸入和輸出的 SASS，這樣 Angular-CLI 仍會編譯我的 SASS，但不會捆綁它。

"styles": [
  {
    "input": "scss/style.scss",
    "output": "assets/style/style"
  }
]

然后我回到了老學校，只是在我的 index.html 的輸出 csss 中添加了一個鏈接標簽。

我發現由於 prod 構建向 CSS 添加了散列，因此鏈接不起作用，因此我還需要將輸出散列設置為僅媒體進行構建，以便我可以鏈接到 CSS。

ng build --prod --output-hashing=media

感謝@Kevin 指出使用 prod 標志設置了哪些標志。