Negotiate Pushing Milestone

    styles-loader

    4.0.1 • Public • Published

    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.

    Install

    npm i styles-loader

    DownloadsWeekly Downloads

    855

    Version

    4.0.1

    License

    MIT

    Unpacked Size

    12.8 kB

    Total Files

    4

    Last publish

    Collaborators

    • devrafalko