Работа с SASS и SCSS в Webpack
Давайте теперь научимся работать с препроцессором SASS
. Для этого для начала нам нужно установить сам SASS
:
npm install sass --save-dev
Затем соответствующий лоадер:
npm install sass-loader --save-dev
Пусть теперь к точке входа импортируются несколько файлов SASS
:
/src/index.jsimport './styles1.sass';
import './styles2.sass';
Давайте настроим Webpack
так, чтобы SASS
код преобразовывался в CSS
, порядок их перечисления в массиве свойства use
важен, так как загрузчики используются от последнего к первому:
webpack.config.jsexport default {
entry: "./src/index.js",
rules: [
{
test: /\.s[ac]ss$/i,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
};
А теперь настроим Webpack
так, чтобы преобразованный CSS собирался в один общий бандл:
webpack.config.jsexport default {
entry: "./src/index.js",
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
],
},
};