📘 DOC: Add PostCSS configuration on Astro (#947)
This commit is contained in:
parent
758f172708
commit
5e9a47ffbc
1 changed files with 27 additions and 0 deletions
|
@ -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:
|
||||
|
|
Loading…
Reference in a new issue