Integrating Jux with Astro
This guide will walk you through setting up Jux in a Next.js project, from creating a new Next.js app to configuring Jux as a PostCSS plugin.
-
Create a new Astro project (Skip if using an existing project)
First, let’s create a new Astro project using astro create template:
-
Install Jux CLI
-
Initialize a new project
This will install the necessary dependencies, and create
jux.config.ts
andpostcss.config.js
files in your project root. -
Configure your include files
Add the path to your source files in
jux.config.ts
. During the build process, Jux will scan these files to generate the CSS file. -
Add Jux’s @layer directive to your main CSS file
In your
src/layouts/Layout.astro
or a similar global layout file, import your global CSS: -
Start using Jux in your project
Import your component or style into your Astro component:
Your Astro app is now set up with Jux! You can start building your components using Jux’s CSS-in-JS capabilities while leveraging Astro’s powerful features. Remember to define your styles in separate .ts or .js files for now, and import them into your Astro components.