---
name: Webpack CSS
---

# Webpack CSS Support

> **Supprt CSS Pre and Post Processors in Webpack**

This runner creates the necessary Webpack configuration and source code to support CSS, SASS, and other
CSS pre and post processor formats;  when included and unmodified the CSS supprt is identical to that in `create-react-app`.  You may add or subtract to it to configure it exactly as needed.

Standalone CSS and preprocessor formats could be considered legacy, as CSS in JS approaches such as `styled-components` or 
`emotion` have largely made these unnecessary.  Therefore, we have split out the CSS support into a separate package for 
those that continue to require it. 

## Included features

* CSS style loaders for WebPack 
* Mini CSS Extract tool to place CSS in its own chunk file for async loading
* Post CSS FlexBug Fixes
* Post CSS autoprefixer
* Support for CSS Modules
* Opt-in support for SASS (using `.scss` or `.sass` extensions)
* Supprt for SASS CSS Modules
* Plugins to optimize and minimize CSS Assets, with safe parsing

## Installation

[`@berun/runner-webpack-css`](https://www.npmjs.com/package/@berun/runner-webpack-css) is a common runner that is automatically
included by BeRun presets such as [`@berun/preset-react`](https://www.npmjs.com/package/@berun/preset-react).   If you 
need to install it directly, follow these directions:

```bash
$ npm install --save-dev @berun/runner-webpack-css
```

```js
// berun.config.ts
export default {
  use: [ '@berun/runner-webpack-css']
}
```

## Usage

Once included in the BeRun configuration, no further action is necessary, just include CSS
and SASS files and modules as per `create-react-app`