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#

To add a Bookshop SCSS file for a component, create a .scss file next to your component with the same name, just like the Bookshop data file from Using Structures.

So, if we wanted to add styles for our sample component we would create a sample.scss file in the same folder as our sample.astro file. Afterward, our directory structure will look like this:

src/
├─ components/
│  └─ sample/
│     ├─ sample.eleventy.liquid
│     ├─ sample.bookshop.yml
└     └─ sample.scss 

Global Bookshop SCSS#

In addition to per-component SCSS files, you can also use Bookshop to include global SCSS files, which will affect all components on your site. Global SCSS files live in the shared/styles directory, so a site with a single global.scss might look like this:

src/
└─ shared/
   └─ styles/
      └─ global.scss 

Bookshop first imports all the styles 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.

Building your Bookshop SCSS#

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

npx @bookshop/sass -b src -o public/css/bookshop.css

This command 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.

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 src -o public/css/bookshop.css",
    "sass:watch": "bookshop-sass -b src -o public/css/bookshop.css -w"
  }
}