Làm việc với SASS trong Webpack

Bây giờ hãy học cách làm việc với bộ tiền xử lý SASS. Để làm điều này, trước hết chúng ta cần cài đặt chính SASS:

npm install sass --save-dev

Sau đó là loader tương ứng:

npm install sass-loader --save-dev

Bây giờ giả sử một số tệp SASS được nhập vào điểm đầu vào:

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

Hãy cấu hình Webpack để mã SASS được chuyển đổi thành CSS:

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

Và bây giờ hãy cấu hình Webpack để CSS đã chuyển đổi được thu thập thành một bundle chung:

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

Kết nối một số tệp SASS với điểm đầu vào của bạn. Biên dịch chúng thành CSS.