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.
: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.
: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.
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-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-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-url")
rules: [
{
test: /\.css$/,
rules: [
{
issuer: { not: /\.css$/ },
use: "style-loader"
},
{
use: [
"css-loader",
{
loader: "postcss-loader",
plugins: [
urlPlugin({})
]
},
"sass-loader"
]
}
]
}
]
Juho Vepsäläinen |
Joshua Wiens |
Kees Kluskens |
Sean Larkin |
Michael Ciniawsky |
Evilebot Tnawi |
Joscha Feth |