Puna me SASS në Webpack

Tani le të mësojmë të punojmë me përpunuesin paraprak SASS. Për këtë, së pari na duhet të instalojmë vetë SASS:

npm install sass --save-dev

Pastaj loader-in përkatës:

npm install sass-loader --save-dev

Lejo që tani në pikën e hyrjes të importohen disa skedarë SASS:

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

Le ta konfigurojmë Webpack-in në mënyrë që kodi SASS të shndërrohet në CSS:

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

Dhe tani le ta konfigurojmë Webpack-in në mënyrë që CSS-ja e transformuar të mblidhet në një bundle të përbashkët:

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

Lidhni disa skedarë SASS në pikën tuaj të hyrjes. Përpiloni ato në CSS.