npm install --save-dev css-loaderThe css-loader converts ICSS into EcmaScript Modules.
ICSS allows to describe imports and exports in CSS. The following syntax is allowed:
@import url('./other-file.css');
@import url('other-module/style.css');Imports other CSS files. Imports are hoisted in ICSS.
:import('./module') {
local-alias: importedIdentifier;
other-name: otherIdentifier;
}Similar to
import { importedIdentifier as localAlias, otherIdentifier as otherName } from './module';The local alias can be used in the complete file and has the value of the export from the module.
The imported module could be another ICSS file or any other module.
The imported identifier must be a valid javascript identifier (dashes are not allowed). The local alias must be a valid css identifier (dashes are allowed).
:export {
exportedName: hello world;
otherExportedName: 5px 5px, red;
}Similar to
export const exportedName = "hello world";
export const otherExportedName = "5px 5px, red";Note that spacing is not significant.
The exported identifier must be a valid javascript identifier (dashes are not allowed).
default should not be used a export name.
It's often needed to thread url()s in the CSS file as imports to other assets.
You want to add all referenced assets into the dependency graph.
This can be achieved by a postcss plugin: postcss-plugin-icss-url.
To enable postcss plugins in your CSS pipeline, chain css-loader with postcss-loader. Example configuration with style-loader:
const urlPlugin = require("postcss-plugin-icss-url")
rules: [
{
test: /\.css$/,
rules: [
{
issuer: { not: /\.css$/ },
use: "style-loader"
},
{
use: [
"css-loader",
{
loader: "postcss-loader",
plugins: [
urlPlugin({})
]
}
]
}
]
}
]It's often needed to use a preprocessor for CSS. Example: SASS.
const urlPlugin = require("postcss-plugin-icss-url");
rules: [
{
test: /\.sass$/,
rules: [
{
issuer: { not: /\.sass$/ },
use: "style-loader"
},
{
use: [
"css-loader",
"sass-loader"
]
}
]
}
]For production builds it's useful to minimize the CSS. This can be done via postcss plugin:
const cssnano = require("cssnano");
rules: [
{
test: /\.css$/,
rules: [
{
issuer: { not: /\.css$/ },
use: "style-loader"
},
{
use: [
"css-loader",
{
loader: "postcss-loader",
plugins: [
cssnano({
// options
})
]
}
]
}
]
}
]const cssnano = require("cssnano");
const urlPlugin = require("postcss-plugin-icss-url");
rules: [
{
test: /\.(sass|css)$/,
rules: [
{
issuer: { not: /\.(sass|css)$/ },
use: "style-loader"
},
{
use: [
"css-loader",
{
loader: "postcss-loader",
plugins: [
urlPlugin({}),
cssnano({
// options
})
]
}
]
},
{
test: /\.sass$/,
use: "sass-loader"
}
]
}
]For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on. This can be achieved by using the extract-text-webpack-plugin to extract the CSS when running in production mode.
| Name | Type | Default | Description |
|---|---|---|---|
sourceMap |
{Boolean} |
false |
Enable/Disable Sourcemaps |
To include source maps set the sourceMap option.
I. e. the extract-text-webpack-plugin or the style-loader can handle them.
They are not enabled by default because they expose a runtime overhead and increase in bundle size (JS source maps do not). In addition to that relative paths are buggy and you need to use an absolute public path which include the server URL.
webpack.config.js
{
loader: 'css-loader',
options: {
sourceMap: true
}
}
Juho Vepsäläinen |
Joshua Wiens |
Kees Kluskens |
Sean Larkin |
Michael Ciniawsky |
Evilebot Tnawi |
Joscha Feth |
Tobias Koppers |