https://github.com/arshtepe/css-file-loader
Clone resources from link in css like images, fonts ...
https://github.com/arshtepe/css-file-loader
css webpack webpack-loader webpack-plugin webpack4
Last synced: 2 months ago
JSON representation
Clone resources from link in css like images, fonts ...
- Host: GitHub
- URL: https://github.com/arshtepe/css-file-loader
- Owner: arshtepe
- License: mit
- Created: 2018-05-24T16:27:10.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-29T14:19:09.000Z (about 7 years ago)
- Last Synced: 2024-04-28T11:03:36.711Z (about 1 year ago)
- Topics: css, webpack, webpack-loader, webpack-plugin, webpack4
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![npm][npm]][npm-url]
[![deps][deps]][deps-url]
CSS File Loader
## 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)`.
```css
.selector {
background: url(./img.png) no-repeat -122px -293px;
width: 16px;
}
```
it will be replaced by
```css
.selector {
background: url([options.publicPath]/[file hash].png) no-repeat -122px -293px;
/*For example url(http://localhost/ad31..2a.png) */
width: 16px;
}
```
and `[file hash].png` will copy to [output.path](https://webpack.js.org/configuration/output/#output-path) folder and filename replaced by file hash `[file hash].png`
### webpack.config.js
```js
module.exports = {
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
```js
...
rules: [
{
test: /\.scss$/,
use: [ 'css-loader', 'css-file-loader', 'sass-loader' ]
}
]
...
```
## Options
Name | Type | Default | Description
------------ | ------------- | ------------- | -------------
`publicPath` | `{String}` | [output.publicPath](https://webpack.js.org/configuration/output/#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
```js
{
test: /\.scss$/,
use: [
{loader: "css-loader"},
{
loader: "css-file-loader", options: {
publicPath: "/hello/" ,
}
},
{loader: "sass-loader"}
]
}
```
[npm]: https://img.shields.io/npm/v/css-file-loader.svg
[npm-url]: https://npmjs.com/package/css-file-loader
[node]: https://img.shields.io/node/v/css-file-loader.svg
[node-url]: https://nodejs.org
[deps]: https://david-dm.org/webpack-contrib/css-file-loader.svg
[deps-url]: https://david-dm.org/webpack-contrib/css-file-loader