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#

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:


These files are optional. You can safely delete them if you would rather maintain your component styles elsewhere.

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:


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:

Command line
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.

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

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

Open in a new tab