> For the complete documentation index, see [llms.txt](https://michey85.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://michey85.gitbook.io/webpack/stili.md).

# Стили

Мы хотим подключать стили через js и чтобы они корректно собирались в отдельный файл с минификацией и прочими плюшками.

```javascript
import "./styles.css";
```

### Базовые зависимости

```
yarn add -D css-loader mini-css-extract-plugin style-loader
```

Style-loader опционален, его можно как комбинировать с плагином, так и использовать, например, для dev-режима.

### Базовый конфиг

По умолчанию собирается в `dist/main.css`.

```javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    module: {
        rules: [
            {
                test: /\.css/i,
                use: [
                    MiniCssExtractPlugin.loader, // либо добавить тернарник для style-loader под ражные режимы сборки
                    "css-loader"
                ],
            }
        ]
    },


    plugins: [
        new MiniCssExtractPlugin(),
    ],
}
```

### Препроцессинг

{% code title="\_global.scss" %}

```css
body {
    margin: 0;
}
```

{% endcode %}

{% code title="index.scss" %}

```css
@use "global";


```

{% endcode %}

Дополнительные зависимости:

```
yarn add -D node-sass sass-loader
```

И изменения в конфиге:

```javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    module: {
        rules: [
            {
                test: /\.s?css/i, // /\.(s[ac]|c)ss$/i
                use: [
                    MiniCssExtractPlugin.loader, // либо добавить тернарник для style-loader под ражные режимы сборки
                    "css-loader",
                    "sass-loader"
                ],
            }
        ]
    },


    plugins: [
        new MiniCssExtractPlugin(),
    ],
}
```

### PostCSS

```
yarn add -D postcss postcss-preset-env postcss-loader
```

{% code title="postcss.config.js" %}

```javascript
module.exports = {
    plugins: ["postcss-preset-env"],
}
```

{% endcode %}

Добавить в цепочку лоадеров для стилей:

```javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    module: {
        rules: [
            {
                test: /\.s?css/i,
                use: [
                    MiniCssExtractPlugin.loader, // либо добавить тернарник для style-loader под ражные режимы сборки
                    "css-loader",
                    "postcss-loader",
                    "sass-loader"
                ],
            }
        ]
    },


    plugins: [
        new MiniCssExtractPlugin(),
    ],
}
```

Из коробки базовый пресет postCss делает фолбеки для старых браузеров (например, для css-переменных перед ними создает статические значения.

Также базовый пресет работает с вендорными префиксами (autoprefixer ставить не обязательно), но делает это на основе [browserlist](/webpack/browserslist.md).