Search code examples
javascriptcssreactjsparceljsprimereact

What is the best way to include css files for Prime React components when using Parceljs?

I am using Parceljs (https://github.com/parcel-bundler/parcel) and React in my application. I have decided to use Prime React components as they seam pretty solid and well built. I have installed Prime React with npm successfully and of course all js and css files are residing in node_modules/primereact folder. Also all css files (including css files for all free themes) are in node_modules/primereact/resources folder.

In the Prime React documentation they are only mentioning what are the required css files for Prime React components to be able to work and there is example on how to import css files if you are using webpack.

This is the link to a "Get Started" documentation part for Prime React components:

https://www.primefaces.org/primereact/#/setup

As per documentation If I am using webpack I can just import css files with import command like this:

import 'primereact/resources/themes/nova-light/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

But what is the best way to import css files if I am using Parceljs Bundler?

Obviously, I can just copy css files from node_modules/primereact/resources folder to my application folder and just import css files normally with link:

<link rel="stylesheet" type="text/css" href="mystyle.css">

but that way I can not just update prime react with npm and get the latest files.

What is the best way to solve this problem?

Solution

  • The answer to this question is that I did not understand that Parcel will also look into node_modules folder when using import command. So as per Parcel documentation:

    https://parceljs.org/css.html

    You can import css files with import command:

    import './index.css';

<link rel="stylesheet" type="text/css" href="index.css">

    But that also means that import command will look into node_modules folder if that file is not found in the application folder. So I have successfully imported Prime React css files with these commands in my MainApp.js file:

    import "primereact/resources/themes/nova-light/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";

    Which is actually the same as you would with Webpack.