We see how to set up Astro JS Sass styling in this post. Although modern CSS now supports many of the features which developers looked to Sass or SCSS to provide in the past, many developers still appreciate Sass. Astro’s Framework agnosticism as regards to using React together with Svelte, Vue or something else is already well known. You will expect this support of all popular frameworks to extend from rendering to styling. Astro does not disappoint here. In this post we see how you can use Sass to add not just global styles but also scoped styles to your Astro and Svelte components. In fact we can extend that to React by using SCSS modules for styling. To add polish we look at setting up Stylelint to enforce a particular code style or even just to make sure your SCSS stays just how you like it!
Rather than build a new app, we have taken the demo app from our Astro JS Tutorial and converted styling to SCSS. In the tutorial, we used vanilla CSS and you will see there is not much to change to get Sass up and running. In this post we just look at the main changes you need to make to your files (rather than provide a follow along tutorial). Let me know if you like this style instead of building an app as you follow along. If you really do want to build something as you read along though, you can clone the Astro JS Tutorial and make changes, converting it to SCSS.
We add the Sass package as well as Stylelint here, which we use later.
We will create a global styles file at
well as changing the syntax to make it more idiomatic Sass, we also import a couple of files:
We place the fonts in a separate file just to keep the global styles file cleaner. However for the
variables, beyond style, placing variables in a separate file makes it easier to import them when
we want to use the variables in scoped styles within component files. Having a separate variables
file lets us import just the variables without needing to import the entire global styles files in
these cases. In line
1 we set the
Here is the fonts file for completeness:
src/styles/fonts.scss — click to expand code.
and also the variables file:
src/styles/variables.scss — click to expand code.
Next, let’s look at the home page to see Astro JS Sass style imports together with scoped styling in an Astro file.
2 we import the global Sass stylesheet. This is not really
that different to how we would import a CSS stylesheet. In fact, the only real difference is the change
in filename. Note that we have defined an alias
src/styles in the
tsconfig.js file. This lets us use the shorthand which you
see in the code. You can see a more detailed explanation of this in the Astro JS tutorial.
We can add scoped styles using a
<style> tag (just like with
vanilla CSS). We should remember though, when using Sass to add a
lang="scss" attribute to the style tag, as in line 43. Because we want to use variables defined in the
src/styles/variables.scss within this style element, we can just import that file. We do that in line
Scoped styles in a Svelte component work just like the Astro file we just looked at. Because this is a component, rather than a page or a layout, we do not import the global style sheet in the Svelte file. Since the component will be embedded in an Astro page, we can rely on the page or its template to ensure global styles are imported.
For completeness, here is the Svelte file. Notice that the
container class does not collide with the
container we used in the Astro component,
because of the scoping.
src/components/Video.svelte — click to expand code.
React in Astro does not have an out-of-the-box scoped styling solution as convenient as what we have seen for Svelte and Astro files. Having said that, it is still fairly easy to scope styles using SCSS modules. This involves defining styles in a side file (typically named like the component which uses it) then importing them into the component file. Let's take a closer look.
We have our React Video component defined in
src/components/Video.jsx. Then we define its styles in Sass in
Notice, once more, we import the variables for use in the local Sass code. Then, we import all of
the styles as a
styles object in the React file. The actual scoped
1, we import the styles from the module file. Our style
module uses the container class. In line
8 we attach the scoped class
<section> element. We access it via
styles.container. You can also add scoped class styles where the styles are attached to a kebab-case class (for
button-alt). We see this in action where we define styles
container-alt class in line
styles['container-alt']. We see the concrete use of this in line
Stylelint is a great tool for enforcing code style in your app styles helpful both when working in a team and on your own personal projects. You can easily build stylelint checks into your continuous integration process.
First create a
.stylelintrc.json config file:
Feel free to customise this to your own tastes. See stylelint docs for details.
Next we will add a lint script to package.json:
We define the new script in line
11. Here we set stylelint to
.svelte files. To run the script, in the Terminal type:
You can add this into existing Husky configuration. If you want to set this up have a look at the post on 7 Tools to Streamline your CI Workflow.
In this post we have run through the key parts of setting up Astro JS Sass styling. In particular, we looked at:
- how you can add global styles with Sass in Astro as well as scoped styles in Astro pages and components,
- using SCSS modules in Astro to add scoped styling to React components,
- configuration for stylelint in Astro.
The Astro JS Sass styling demo code is in the Rodney Lab GitHub repo . You can also try it on Stackblitz .
I hope you found this article useful and am keen to hear how you will the starter on your own projects as well as possible improvements.
- Astro fully supports Sass including global styles, scoped styles in Astro pages as well as in Svelte components. On top you can add scoped Sass styling to React components using SCSS modules. We have seen you just need to install the sass package in your project to get going. For convenience you may want to create a Sass variables file and import this into SCSS modules files or scoped style blocks. This lets you easily used centrally defined variables in these cases.
- Yes stylelint is a great choice for keeping your styling maintainable in Astro. We have seen how to configure it with SCSS. You can add your own rules and tie these to your continuous integration process. This helps an entire team code in a consistent style.
Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as SvelteKit. Also subscribe to the newsletter to keep up-to-date with our latest projects.