css-loader
's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.Name | Version | Size | License | Type | Vulnerabilities |
---|---|---|---|---|---|
camelcase | 6.3.0 | 3.75 kB | MIT | prod | |
cssesc | 3.0.0 | 6.34 kB | MIT | prod | |
icss-utils | 5.1.0 | 3.93 kB | ISC | prod | |
loader-utils | 2.0.4 | 11.46 kB | MIT | prod | |
postcss-modules-extract-imports | 3.0.0 | 4.16 kB | ISC | prod | |
postcss-modules-local-by-default | 4.0.4 | 6.22 kB | MIT | prod | |
postcss-modules-scope | 3.1.1 | 4.71 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.35 | 193.05 kB | MIT | prod peer | |
schema-utils | 3.3.0 | 17.93 kB | MIT | prod | |
semver | 7.6.0 | 26.57 kB | ISC | prod | |
webpack | 5.90.1 | 924.37 kB | 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.