PrimeNG stylesheets not found

问题

I'm having trouble with a new project I've just created. For some reason when trying to import the stylesheets of PrimeNG I'm getting a 404 error. I don't know if it's something to do with the configuration of my project.

I'm using the Angular Class WebPack Starter, I've added PrimeNG but as mentioned above I'm getting a 404 error. Although it doesn't make much sense I'm suspecting that it's related to the fact that the stylesheets are in the node_modules folder. As a test I've put a .css file in the node_modules folder and it wasn't found. However, when put in my "global" folder for the public assets the file was found.

Screenshot with the test stylesheet and the PrimeNG theme

Screenshot with the test stylesheet moved to public folder and the PrimeNG theme

I know it's a trivial issue but I can't seem to find any information. Just in case I've also looked at PrimeNG's setup page however it did not make a difference.

回答1:

I had the same with problem with a Angular2 app and managed to get around it by importing the .css files directly into the my main.ts script.

This post helped me : Example of how to load static CSS files from node_modules using webpack?

I just followed the instruction in the post mentioned above and added this to my main.ts.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import 'primeng/resources/themes/afterdark/theme.css';
import 'font-awesome/css/font-awesome.min.css';
import 'primeng/resources/primeng.min.css';

import { AppModule } from './modules/app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Hope this helps.

回答2:

I faced the same issue related to missing css files, If you are using angular-cli to build your project, follow these steps :

1-Edit your project's angular-cli.json file

2-Update Styles section by adding needed css files as follows:

"styles": [
    "styles.css", // default generated one
    "../node_modules/primeng/resources/themes/omega/theme.css" , //primeng css
    "../node_modules/primeng/resources/primeng.css" //primeng css
]

来源：https://stackoverflow.com/questions/39960363/primeng-stylesheets-not-found

标签

angular

Webpack

stylesheet

node-modules

primeng