Styling your site
You use React to build your site. So, you can add CSS classes to any React Component using the
You can also import stylesheets on the component level. Still, due to the global nature of CSS, we recommend against it and instead use CSS Modules or something similar to properly scope your CSS (see below).
Multiple CSS files are merged and minified into a single
.css file in production.
Styles from node_modules
You can also import CSS files directly from the
node_modulesfolder. The import path starts with the package name (for example,
bootstrap\) and then the file's location inside that package.
For global CSS like
bootstrap you should import those styles inside
pages/_app.ts. For component-level CSS, you can import it inside a component directly:
CSS Modules locally scope CSS by automatically creating unique class names, making it ideal to use on the component level.
To use CSS Modules, a CSS file needs to have the
Classes from CSS Modules are imported and accessible as a regular JS Object. For example:
And then inside your component:
commercetools Frontend allows you to import Sass using both the
.sass extensions. You can use component-level Sass via CSS Modules and the
You need to install Sass before you can use it:
Sass supports 2 different syntaxes, each with their own extension. The
.scss extension requires you use the SCSS syntax, while the
.sass extension requires you use the Indented Syntax (Sass).\n\nIf you're unsure which to choose, start with the
.scss extension, which is a superset of CSS and doesn't require you to learn the Indented Syntax (Sass).
styled-jsx is 1 CSS-in-JS approach that you can use directly:
styled-jsx you can use any other CSS-in-JS technology. Here are a few recommendations:
Tailwind CSS is a utility-first CSS framework packed with classes like
rotate-90 that can be composed to build any design directly in your markup.
commercetools Frontend comes with Tailwind CSS installed and pre-configured. Tailwind is configured in the file
packages/<project>/frontend/tailwind.config.js. It provides a default configuration that you can adjust to your own needs.