css-loader turns a CSS file into a JavaScript module, and style-loader puts that CSS on the page. In the classic setup, the two work together so that import './styles.css' styles the page.
css-loaderinterprets@importandurl()the way webpack treatsimportandrequire(). It resolves those CSS dependencies and returns the CSS as a string.style-loaderinjects that CSS into the DOM by adding<style>tags when the bundle runs.
Loaders run right to left, so style-loader sits first in the array and runs after css-loader.
// This processes CSS files and injects them into the DOM
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
For production, MiniCssExtractPlugin.loader has long replaced style-loader, so the CSS goes into separate .css files the browser can cache. Since webpack 5.109, built-in CSS support is on by default for .css files that no loader rule matches. It can extract or inject styles itself, and mini-css-extract-plugin is now deprecated.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓