Package Exports
- css-loader
- css-loader/package.json
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (css-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
css loader for webpack
installation
npm install css-loader
Usage
var css = require("css!./file.css");
// => returns css code from file.css, resolves imports and url(...)css code will be minimized if specified by the module system.
@import and url(...) are interpreted like require() and will be resolved by the css-loader.
Good loaders for requiring your assets are the file-loader
and the url-loader which you should specify in your config (see below).
To be combatible to existing css files:
url(image.png)=>require("./image.png")url(~module/image.png)=>require("module/image.png")
Example config
This webpack config can load css files, embed small png images as Data Urls and jpg images as files.
module.exports = {
module: {
loaders: [
{ test: /\.css/, loader: "style-loader!css-loader" },
{ test: /\.png/, loader: "url-loader?limit=100000&mimetype=image/png" },
{ test: /\.jpg/, loader: "file-loader" }
]
}
};'Root-relative' urls
For urls that start with a /, the default behavior is to not translate them:
url(/image.png)=>url(/image.png)
If a root query parameter is set, however, it will be prepended to the url
and then translated:
With a config like:
loaders: [
{ test: /\.css/, loader: "style-loader!css-loader?root=." },
...
]The result is:
url(/image.png)=>require("./image.png")