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

# CSS

CSS-loader, форматирование CSS

Устанавливаем **style-loader** и **css-loader**:

> yarn add style-loader css-loader

В файл **webpack.config.js** в секцию *rules* добавляем

```javascript
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}
```

Создаем файл **src/App.css**

```css
body {
    color: red;
}
```

В файл **src/App.js** добавляем

```jsx
...
import 'App.css'
...
```

Запускаем:

> yarn start

Текст "Hello, React!" должен стать красным

**Расширения VSCode для форматирования файлов CSS**

Здесь могут быть разные варианты. Только не нужно форматировать файлы \*.js - этим уже занимается ESLint

**Вариант 1: Beautify**

```javascript
"editor.formatOnSave": true,
"beautify.ignore": "**/*.js"
```

**Вариант 2: Prettier - Code formatter**

```javascript
  "editor.formatOnSave": true,
  "[javascript]": {"editor.formatOnSave": false}
```