Importing Bookshop Styles

Write your styles alongside your components and import them automatically

Bookshop provides helpers for writing SCSS styles alongside your components. While not required, this can help organize your component directory and keep components self-contained.

The Bookshop SCSS file#

The last files for us to cover from the @bookshop/init command we ran earlier are the SCSS files that were created for us.


These files are completely optional, and can be safely deleted if you would rather maintain your component styles elsewhere.

To include Bookshop styles on an Eleventy website, Bookshop provides a @bookshop/sass package to include as part of your build step:

Command line
npx @bookshop/sass -b component-library -o site/css/bookshop.css

This compiles all of the styles from your Bookshop directory, and outputs a CSS file ready to be referenced on your website or imported into another style pipeline.

Bookshop first imports all styles that exist in the shared/styles/ directory, followed by all component styles in alphabetical order. As such the shared/styles/ directory is a great place to define any variables or mixins that your component styles will use.

The @bookshop/sass command will run any PostCSS plugins you have configured in your working directory.

To easily add this command as part of your workflow, install the @bookshop/sass package and reference bookshop-sass from your package.json:

  "scripts": {
    "sass:build": "bookshop-sass -b component-library -o site/css/bookshop.css",
    "sass:watch": "bookshop-sass -b component-library -o site/css/bookshop.css -w"

Run npx @bookshop/sass --help to see the available options.

Open in a new tab