Webpack ~ Loading Assets - rohit120582sharma/Documentation GitHub Wiki

In order to add the SCSS processor into our React application, we will require both sass and loader packages for webpack:

npm install --save-dev style-loader css-loader sass-loader node-sass

• sass-loader loads a .scss file and compiles it to css. The sass-loader is dependent on another loader node-sass which allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.
• css-loader interprets syntax like @import and url() and resolves them.
• style-loader adds CSS to the DOM by injecting a <style> tag. It's recommended to combine style-loader with the css-loader.

Import our app.scss file from app.js:

import "./style/app.scss";

We have to update webpack configuration module property slightly:

module: {
	rules: [
		{
			test: /\.css$/,
			use: ['style-loader', 'css-loader']
		},
		{
			test: /\.(scss|sass)$/,
			use: ['style-loader', 'css-loader', 'sass-loader']
		}
	]
}

It resolves import/require() on a file into a url and emits the file into the output directory. Usually used for images etc.

npm install --save-dev file-loader

Import image file from app.js:

import img from './file.png';

We have to update webpack configuration module property slightly:

module: {
	rules: [
		{
			test: /\.(png|jpe?g|gif|svg)$/,
			use: ['file-loader']
		}
	]
}