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 lets you import Sass using both the
.sass extensions. You can use component-level Sass via CSS Modules and the
Install Sass before using it by running the following command.
Sass supports two syntaxes, each with their own extension. The
.scss extension requires the SCSS syntax, while the
.sass extension requires the Indented Syntax (Sass). If you don't know which one to choose, start with the
.scss extension, since it is a superset of CSS and doesn't require learning 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.