Installation
npm i --save-dev css-file-loader
How it works
This loader clones files (images, fonts ...) which referenced from css file like url (./image.png)
.
it will be replaced by
and [file hash].png
will copy to output.path folder and filename replaced by file hash [file hash].png
webpack.config.js
moduleexports = module: rules: test: /\.css$/ use: 'css-loader' 'css-file-loader'
Combine with other loaders like sass
Important: css-file-loader must be before sass-loader
... rules: test: /\.scss$/ use: 'css-loader' 'css-file-loader' 'sass-loader' ...
Options
Name | Type | Default | Description |
---|---|---|---|
publicPath |
{String} |
output.publicPath or / if options.publicPath and output.publicPath are empty |
This option specifies the public URL of the output directory when referenced in a browser.Must have slash at the end /hello/ |
Usage with options
test: /\.scss$/ use: loader: "css-loader" loader: "css-file-loader" options: publicPath: "/hello/" loader: "sass-loader"