Angular 2組件樣式無法解析從node_modules導入的css

根據Angular Component Styles下的文檔，我試圖導入在node_modules下找到的樣式表;即：Angular 2組件樣式無法解析從node_modules導入的css

test.component.css：

@import '[email protected]/material/core/theming/all-theme.css';

由此分量定義：

@Component({ 
    moduleId: module.id, 
    selector: 'app-test', 
    templateUrl: 'test.component.html', 
    styleUrls: ['test.component.css'], 
    encapsulation: ViewEncapsulation.None 
}) 
export class TestComponent { 
}

不幸的是，當瀏覽頁面，它出現的〜@角/無法找到material/core/theming/all-theme.css。

這個項目是使用Angular-Cli設置的。

我想我可以複製樣式，並引用它們，但我寧願保持圖書館依賴關係分開。

來源

2017-06-10 Robert Colfin

只是爲了確認，您是否安裝了@ angular/material。文件夾結構是否正確以及文件是否存在於node_modules中 – Skeptor

從angular-cli v1.0.0-beta.28.3升級到angular/cli v1.1.2後，這看起來已經解決了。 –

如果要包括來自節點模塊文件夾中的任何樣式表..你只需將它添加在.angular-cli.json

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

而且你不需要添加encapsulation:ViewEncapsulation.None，直到你用一些第三方插件動態創建你的html或添加一些隨機的CSS。

，你可以隨時使用其包含在您.angular-cli.json

來源

2017-06-10 18:43:41 Ashwani

這是正確的。你也可以在styles.css中導入樣式 –

它看起來像升級到angular-cli v1.1.2固定它，不需要修改.angular-cli.json，雖然我也嘗試過。我仍然發現我需要使用ViewEncapsulation.None，否則當我將它們添加到元素的classList時，導入的類不會被解析。 –

-1

的問題是文件擴展全局CSS。您正在使用擴展名css，該擴展名不支持從其他位置導入文件，因此您可以將擴展名更改爲scss。在這裏你可以從node_modules導入文件。

來源

2017-06-11 04:03:29

不支持CSS導入？ – Skeptor

在webpack中，當css導入任何文件時，它會被解釋爲URL，並且如果使用scss，那麼該文件將作爲'style-loader'導入。意思是它實際上加載文件不僅僅是URL。 –

Angular 2組件樣式無法解析從node_modules導入的css

回答

相關問題