Importing Bookshop Styles

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.

_component-library/
├─ components/
│  └─ sample/
│     ├─ sample.eleventy.liquid
│     ├─ sample.bookshop.yml
│     └─ sample.scss 
└─ shared/
   └─ styles/
      └─ global.scss 

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

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.

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"
  }
}