Parcel includes support for CSS out of the box. To add a CSS file, either reference it with a
<link> tag in an HTML file:
<link rel="stylesheet" href="index.css" />
CSS assets can contain dependencies referenced by
@import syntax, as well as references to images, fonts, etc. via the
@import at-rule can be used to inline another CSS file into the same CSS bundle as the containing file. This means that at runtime a separate network request will not be needed to load the dependency.
Referenced files should be relative to the containing CSS file. You can also use absolute and tilde specifiers. To import a CSS file from npm, use the
@parcel/resolver-glob plugin is enabled, you can also use globs to import multiple CSS files at once. See Glob specifiers for more details.
url() function can be used to reference a file, for example a background image or font. The referenced file will be processed by Parcel, and the URL reference will be rewritten to point to the output filename.
Referenced files should be relative to the containing CSS file. You can also use absolute and tilde specifiers. The
data-url: scheme can also be used to inline a file as a data URL. See Bundle inlining for more details.
To use CSS modules, create a file with the
import * as classes from './styles.module.css';
document.body.className = classes.body;
.body class will be renamed to something unique to avoid selector clashes with other CSS files.
CSS modules also work with other languages that compile to CSS, such as SASS, Less, or Stylus. Name your file using the corresponding file extension, such as
Using CSS modules also has the benefit of making dependencies on specific class names explicit in your code. This enables unused CSS classes to be automatically removed.
As you can see in the above example, only the
.button class is used, so the unused
.cta class is removed from the compiled CSS file.
Enabling CSS modules globally#
By default, CSS modules are only enabled for files ending with
.module.css. All other CSS files are treated as global CSS by default. However, this can be overridden using a PostCSS config. This also allows customizing the options of postcss-modules.
PostCSS is a tool for transforming CSS with plugins, like autoprefixer, Preset Env, and many others. You can configure PostCSS with Parcel by creating a configuration file using one of these names:
Install plugins in your app:
yarn add autoprefixer --dev
Then, create a
Plugins are specified in the
plugins object as keys, and options are defined using object values. If there are no options for a plugin, just set it to
Target browsers for Autoprefixer, cssnext and other tools can be specified in a Browserslist.
By default, Parcel transforms each CSS file with PostCSS independently. However, some PostCSS plugins (e.g.
postcss-custom-properties) potentially need to access declarations from other
@imported CSS assets.
In these cases, you can use
postcss-import to run PostCSS over the whole bundle at once instead.
postcss-url should also be used to ensure
url() references are resolved correctly when imported files are inlined.
In production mode, Parcel includes optimizations to reduce the file size of your code. See Production for more details about how this works.
In production mode, Parcel automatically minifies your code to reduce the file sizes of your bundles. By default, Parcel uses cssnano to perform CSS minification. To configure cssnano, you can create a
cssnano.config.json file in your project root directory.