Skip to content

Clone resources from link in css like images, fonts ...

License

Notifications You must be signed in to change notification settings

arshtepe/css-file-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm deps

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).

.selector {
    background: url(./img.png) no-repeat -122px -293px;
    width: 16px;
}

it will be replaced by

.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 folder and filename replaced by file hash [file hash].png

webpack.config.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

...
    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"}
    ]
}

About

Clone resources from link in css like images, fonts ...

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published