-
Notifications
You must be signed in to change notification settings - Fork 519
Angular2SPA, Importing CSS from node_modules with @ on the name #332
Comments
I agree this issue exist for ngprime too.. |
First, thanks for reporting this. Second, are you sure the problem is really the This issue with |
Correct, in my case the issue is as you explained. It fails when loading the css because it has @ and other special characters. Also i tried to load the node_module css file via linking as stylesheet inside layout but node_modules is not available under the wwwroot and at runtime css files are not loaded How to resolve this ?? Thax again for looking into this. |
The Note that since you're now loading |
@SteveSandersonMS now with new aspnet-webpack and changing the loaders in webpack.config i don't see any exception. Still components don;t show proper theme, also i checked vender.css but the primeng css are not added to that. Are we missing something ? I was under assumption that all css will be compiled into vendor.css |
If you want the CSS to be bundled into Notice how it's not necessary to reference the styles from your Angular 2 components at all, because they are being loaded globally, not scoped to a particular component. (Having them scoped to particular components would be undesirable if what you're loading is really some large vendor-supplied CSS file, because you'd be duplicating all that CSS for each component it was scoped to, possibly adding hundreds of kilobytes to your page.) Note that this example is based on latest template source code, so when making the same changes to your |
In the Angular2SPA template, the Angular 2 style statement cannot use @ character on the style path, if it is referencing a css file located inside a node_module with @ character on its name.
Example will be Telerik Kendo UI. One their website, their public npm is @progress.
http://www.telerik.com/kendo-angular-ui/getting-started
@component({
selector: 'counter',
styles: [require('@progress/kendo-angular-buttons/dist/npm/css/main.css')], // load the button theme
template: require('./counter.component.html')
})
when the path is added the TSC generates the following error.
ERROR in ./ClientApp/app/components/app/app.component.css
Module parse failed: C:\workspace9\Angular2Spa\ClientApp\app\components\app\app.component.css Unexpected character '@' (1:0)
When the @ is removed, the TSC only complains the path cannot be found.
The text was updated successfully, but these errors were encountered: