การทำงานกับ SASS ใน Webpack

ตอนนี้เรามาเรียนรู้การทำงานกับ preprocessor SASS กัน เพื่อการนี้ ก่อนอื่นเราต้อง ติดตั้งตัว SASS เอง:

npm install sass --save-dev

จากนั้น loader ที่เกี่ยวข้อง:

npm install sass-loader --save-dev

ให้ตอนนี้ไฟล์ SASS หลายไฟล์ถูกนำเข้า ไปยังจุดเข้า (entry point):

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 หลายไฟล์ ไปยังจุดเข้า (entry point) ของคุณ คอมไพล์ไฟล์เหล่านั้นเป็น CSS