Description

This is a webpack boilerplate that covers all plugins and loaders that are necessary to load .css, .less and | or .sass files into your project. Use npm install styles-loader rather than installing all css, sass and less loaders and plugins separately.

Install

npm install styles-loader --save-dev

your webpack.config.js

• in order to simplify the configuration process, it uses webpack-merge module to combine plenty webpack configs into one [read more]
• all you have to do is to require styles-loader, create the new instance of it and inject it with merge module

const { merge } = require('webpack-merge');
const StylesLoader = require('styles-loader'); //this is a [Function] constructor
const stylesLoader = new StylesLoader(); //create new instace with all ready-to-use webpack rules, plugins, etc.

module.exports = merge(stylesLoader, {
  //your webpack settings here
  entry:'./index.js',
  output:{
    path: path.join(__dirname, 'dist'),
    publicPath: 'dist/'
  }
});

your entry index.js file

  import './css/styles.css';
  import './scss/bootstrap.scss';
  import './less/grid.less';

• By default, all images, icons and fonts loaded in all .css, .sass and .less files with url() and @import keywords will be stored in the ./dist/assets/images and ./dist/assets/misc directories.
• By default, all imported and required .css, .sass and .less files will be parsed to css and added to the DOM by injecting a <style> tag
• and... that’s it!

Customization (optional)

The new StylesLoader([object]) takes the (optional) [Object] config object, that lets to customize how the webpack loaders behave under the hood.

const StylesLoader = require('styles-loader');
const stylesLoader = new StylesLoader({ //[Object] argument
  extract: 'styles.css', //it creates the bundled styles.css file rather than add <style> tags in the html file
  url:{/* the url-loader and file-loader options here for .woff, .ttf, .eot, .svg files */},
  file:{/* the file-loader options here for .jpg, .png, .gif files */},
  css:{/* the css-loader options here */},
  styles:{/*the style-loader options here */}
  sass:{/* the sass-loader options here */},
  less:{/*the less-loader options here */}
});

1. Add styles either as <style> or <link> in your html file

• By default, all imported and required .css, .sass and .less files will be parsed to .css and added to the DOM by injecting a <style> tag automatically
• In order to create one bundled .css file from all imported .css, .sass and .less files, add extract property to the [Object] config. It should indicate the [String] path to the new bundled css file, eg: "dist/styles.css"
• Remember to add <link rel="stylesheet" href="dist/styles.css"/> into your .html file

const { merge } = require('webpack-merge');
const StylesLoader = require('styles-loader');
const stylesLoader = new StylesLoader({
  extract: 'styles.css'
});

module.exports = merge(stylesLoader, {
  //your webpack settings here
  entry:'./index.js',
  output:{
    path: path.join(__dirname, 'dist')
  }
});

2. Customize all loaders and plugins

config.css

Default: {}

• It allows to use all css-loader options
• The css-loader is used to resolve all @imports and url()s

const stylesLoader = new StylesLoader({
  css: {
    url: false
  }
});

config.style

Default: {}

• It allows to use all style-loader options
• The style-loader is used to add the <style> tags into the html file with all stylesheets
• it works only if the 'extract' config property is not defined (because then the bundled .css file is created)

const stylesLoader = new StylesLoader({
  style: {
    insert: 'head'
  }
});

config.sass

Default: {}

• It allows to use all sass-loader options
• The sass-loader is used to compile the scss into css

const stylesLoader = new StylesLoader({
  sass: {
    outputStyle: 'compressed'
  }
});

config.less

Default: {}

• It allows to use all less-loader options
• The less-loader is used to compile the less into css

const stylesLoader = new StylesLoader({
  less: {
    math:'[parens-division]'
  }
});

config.url

Default: { limit: 8192, name: '[name].[ext]', outputPath: './assets/misc' }

• It allows to use all url-loader options
• The url-loader is used to transform small files (woff, ttf, eot, svg) into base64 URIs

const stylesLoader = new StylesLoader({
  url: {
    limit: 20000 //only the files bigger than 20000 bytes will be stored in assets folder
  }
});

config.file

Default: { name: '[name].[ext]', outputPath: './assets/images' }

• It allows to use all file-loader options
• The file-loader is used to emit all url() and @import required jpg, png, gif files into the output directory

const stylesLoader = new StylesLoader({
  file: {
    name: '[hash].[ext]',
    outputPath:'assets/'
  }
});

config.image

Default: {}

• It allows to use all image-webpack-loader options
• The image-webpack-loader is used to optimize jpg, png, gif files

const stylesLoader = new StylesLoader({
  image: {
    mozjpeg: {
      progressive: true,
      quality: 65
    }
  }
});

Sample

git clone https://github.com/devrafalko/styles-loader.git
cd styles-loader/sample
npm install
npm start or npm run build
Check out how the webpack config files look like and how all assets files are handled.