# Работа с SASS в Webpack

Давайте теперь научимся работать препроцессором SASS. Для этого для начала нам нужно установить сам SASS:

`npm install sass --save-dev`

Затем соответствующий лоадер:

`npm install sass-loader --save-dev`

Пусть теперь к точке входа импортируются несколько файлов SASS:

`import './styles1.sass'; import './styles2.sass';`

Давайте настроим Webpack так, чтобы SASS код преобразовывался в CSS:

`export default { entry: './src/index.js', rules: [ { test: /\.sass/i, use: [ 'style-loader', 'css-loader', 'sass-loader', ], }, ], };`

А теперь настроим Webpack так, чтобы преобразованный CSS собирался в один общий бандл:

`export default { entry: './src/index.js', plugins: [new MiniCssExtractPlugin()], module: { rules: [ { test: /\.sass/i, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', ], }, ], }, };`

Подключите несколько файлов SASS к вашей точке входа. Скомпилируйте их в CSS.

←→
↑