webpack-css-loaders

Installation

This one package will let you use css loaders in your projects. Use npm install webpack-css-loaders instead of installing all css-loaders separately.

The following dependencies will be installed:

Package name
css-loader
style-loader
url-loader
file-loader
webpack

Configuration

Require the path module in your webpack.config.js file

var path = require('path');

module.exports = {
  //webpack config
}

Set output folders for images and fonts used in css

The example of folders arrangement:

	output:{
		path: path.join(__dirname,'public/assets/'),
        publicPath:'assets/'
	},

Set loaders

Add the loaders to your webpack.config.js file:

module: {
  rules: [
    {
      test: /\.(jpe?g|png|gif)$/i,   //to support eg. background-image property
      loader:"file-loader",
      query:{
        name:'[name].[ext]',
        outputPath:'images/'
        //the images will be emmited to public/assets/images/ folder
        //the images will be put in the DOM <style> tag as eg. background: url(assets/images/image.png);
      }
    },
    {
      test: /\.(woff(2)?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,    //to support @font-face rule
      loader: "url-loader",
      query:{
        limit:'10000',
        name:'[name].[ext]',
        outputPath:'fonts/'
        //the fonts will be emmited to public/assets/fonts/ folder
        //the fonts will be put in the DOM <style> tag as eg. @font-face{ src:url(assets/fonts/font.ttf); } 
      }
    },
    {
      test: /\.css$/,
      loaders: ["style-loader","css-loader"]
    }
  ]
}

Usage

To put the CSS into the DOM use:

require("some_styles.css");

or set the entry property in the webpack.config.js file:

entry: [
    "some_styles.css",
    "your-entry-point.js"
]

Links

• style-loader
• css-loader
• url-loader
• file-loader

See also

• webpack-icons-installer
• webpack-bootstrap-installer
• webpack-jquery-ui
• webpack-sass-loaders
• webpack-babel-installer
• webpack-karma-jasmine