The css-loader is a module for webpack that interprets @import and url() like import/require() and resolves them. It navigates through the CSS file identified by the @import and url() functions, kind of like how webpack does it for JavaScript files. This allows the bundling of CSS dependencies for your project.
Using css-loader requires you first to install it. This is done through several package managers. You can use npm, where you'll run npm install --save-dev css-loader. Alternatively, with yarn, you just have to run yarn add -D css-loader, or with pnpm, where you'll run pnpm add -D css-loader.
After installing css-loader, you need to add it to your webpack config file. It's done like so:
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
In the file.js, you can import css like:
import css from "file.css";
You then run webpack through your preferred method. css-loader lets you add options to fully customize how it works. Some options include url, import, modules, sourceMap, importLoaders, esModule, and exportType. Each of these options can be defined in the webpack config file within the css-loader options.
The css-loader docs can be accessed directly from the webpack-contrib GitHub repository or from the css-loader README. The docs provide a comprehensive and detailed guide on how to use css-loader, with some examples and descriptions of the options.
