Skip to main content

Generating a Stylesheet

Early Feature

Stylesheet generation is still in-progress. Feel free to report bugs here.

While in development it can be convienient to have access to all the different styling options. However, bringing every SproutCSS style into production would be inefficent.

Instead, we can generate a css file that only contains used styles.

Create config file​

Begin by setting up a sprout.config.json file in the project's root directory. It should contain:

  • The path to your custom css file, including its name.
  • A files array, all the file extensions that may contain sprout style classes.

You can also use the command npx sproutcss --setup or npx sproutcss -s to create one.

sprout.config.json
{
  "path": "./sprout.css",
  "files": ["html"]
}

Change @import​

Remove, or comment out, the SproutCSS path in index.css or other global stylesheet. Instead, import the new custom css file.

index.css
/* @import "./node_modules/sproutcss/sprout.css"; */
@import "./sprout.css";
Import Path

If config.path is not set to ./sprout.css, make sure to reflect that change when importing i.e. @import path/to/styles.css

Generate stylesheet​

Use the command npx sproutcss

That's all! 🎉​

You should now have a stylesheet with only the nessecary css classes.

Remember that this stylesheet will be rewritten on each new generation. If you choose to make changes to SproutCSS classes, do so in the node_modules/sproutcss/sprout.css file that npx sproutcss copies classes from.