For existing projects, you'll need to manually configure Paperclip. If you're starting fresh, just follow the steps in the installation doc.
First up, be sure to have run
npx paperclip-cli init in your existing project directory. This will install necessary dependencies & also include a
paperclip.config.json that's required.
Documentation for this can be found in the Webpack Integration page. The only thing you really need to configure is:
paperclip-loader- compiles PC files to JSX.
style-loader- required since Paperclip emits CSS.
css-loader- required with style-loader.
file-loader- required for CSS files that have
url()'s in them & other media.
Create React App (CRA)
If you're using CRA, then just run
yarn paperclip build --write in your project directory to emit JS files. After that, you can import any component like so:
I'd recommend that you include this in your
Also, to make it easier you can include the build script in your
start script like so:
☝ This will start the Paperclip compiler in parallel with your usual start script.
Here's a walkthrough:
If you're using TypeScript, you can generate Typed Definitions from Paperclip files by running:
This will write
*.pc.d.ts files in in the same directory as their corresponding
*.pc file. I'd also recommend that you include
*.pc.d.ts in your
☝ This command will generate definitions files based on the compiler you're using. So if you're using
paperclip-compiler-react, then React
Typed Definition files will be generated for you. Configuration for the compiler can be found in the