css-loader
's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.Name | Version | Size | License | Type | Vulnerabilities |
---|---|---|---|---|---|
icss-utils | 5.1.0 | 3.93 kB | ISC | prod | |
postcss-modules-extract-imports | 3.1.0 | 10.92 kB | ISC | prod | |
postcss-modules-local-by-default | 4.0.5 | 22 kB | MIT | prod | |
postcss-modules-scope | 3.2.0 | 14.63 kB | ISC | prod | |
postcss-modules-values | 4.0.0 | 3.61 kB | ISC | prod | |
postcss-value-parser | 4.2.0 | 7.81 kB | MIT | prod | |
postcss | 8.4.38 | 193.21 kB | MIT | prod peer | |
semver | 7.6.0 | 26.57 kB | ISC | prod | |
webpack | 5.91.0 | 4.71 MB | MIT | prod peer | 1 1 |
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.