📘 DOC: Add PostCSS configuration on Astro (#947)

This commit is contained in:
Diogo Felix 2021-07-31 02:45:56 -03:00 committed by GitHub
parent 758f172708
commit 5e9a47ffbc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -166,6 +166,33 @@ If you want to import third-party libraries into an Astro component, you can use
</style>
```
### 🎭 PostCSS
[PostCSS](https://postcss.org/) is a popular CSS transpiler with support for [a huge ecosystem of plugins.](https://github.com/postcss/postcss#plugins)
**To use PostCSS with Snowpack:** add the [@snowpack/plugin-postcss](https://www.npmjs.com/package/@snowpack/plugin-postcss) plugin to your project.
```diff
// snowpack.config.js
"plugins": [
+ "@snowpack/plugin-postcss"
]
```
PostCSS requires a [`postcss.config.js`](https://github.com/postcss/postcss#usage) file in your project. By default, the plugin looks in the root directory of your project, but you can customize this yourself with the `config` option. See [the plugin README](https://www.npmjs.com/package/@snowpack/plugin-postcss) for all available options.
```js
// postcss.config.js
// Example (empty) postcss config file
module.exports = {
plugins: [
// ...
],
};
```
Be aware that this plugin will run on all CSS in your project, including any files that compiled to CSS (like `.scss` Sass files, for example).
## Bundling
All CSS is minified and bundled automatically for you in running `astro build`. Without getting too in the weeds, the general rules are: