Skip to content

jalkoby/sass-webpack-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

47 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

SASS-webpack-plugin

!!!! The package is not maintained anymore

Build Status npm version dependencies

Get your stylesheets together ๐Ÿ˜ผ. If you need sass + autoprefixer + webpack just do next:

  npm i -D webpack webpack-dev-server sass-webpack-plugin html-webpack-plugin html-webpack-template
  # or
  yarn add -D webpack webpack-dev-server sass-webpack-plugin html-webpack-plugin html-webpack-template
  // webpack.config.js
  const SassPlugin = require('sass-webpack-plugin');
  const HtmlPlugin = require('html-webpack-plugin');
  const contentBase = path.join(__dirname, 'build');

  module.exports = {
    entry: './src/js/index.js',
    plugins: [
      new SassPlugin('./src/styles/index.scss', process.env.NODE_ENV),
      new HtmlPlugin({
        inject: false,
        template: require('html-webpack-template'),
        title: 'Sass webpack plugin',
        links: [{ rel: 'stylesheet', type: 'text/css', href: '/index.css' }],
        appMountId: 'app'
      })
    ],
    module: {
      // babel, linter, etc
    },
    output: {
      path: contentBase,
      filename: 'index.js'
    },
    devServer: (process.env.NODE_ENV === 'production') ? false : {
      contentBase: contentBase,
      compress: true,
      port: 3000
    }
  };

The reasons to use it

It's an all-in-one solution for sass + webpack without any limitations.

Here are the reasons to use sass-webpack-plugin over "x"-loader:

  • easy to add and little to configure
  • generates a separate file (or a few if there is a need) which fits best for the production
  • completely compiled by node-sass, so styles doesn't slow down a webpack compilation
  • the native sass import instead of a patch version of it

Here are reasons why sass-webpack-plugin is not the best case:

  • you build a js library/app which should has a css inside js code
  • full page reload on a style change take a too much time in your time

Requirements

Webpack 2+. The work with webpack 1.x is not tested so it's up to you ๐Ÿคž

Config examples

  // basic
  new SassPlugin('./src/styles/index.scss');

  // production ready
  new SassPlugin('./src/styles/index.scss', process.env.NODE_ENV);

  // multi files
  new SassPlugin(['./src/styles/one.scss', './src/styles/two.sass'], process.env.NODE_ENV);

  // a different output filename
  new SassPlugin({ './src/styles/index.scss': 'bundle.css' }, process.env.NODE_ENV);

  // with sass tuning
  new SassPlugin('./src/styles/index.scss', process.env.NODE_ENV, {
    sass: {
      includePaths: [path.join(__dirname, 'node_modules/bootstrap-sass/assets/stylesheets')]
    }
  });

  // with source maps + compressing - autoprefixing
  new SassPlugin('./src/styles/index.scss', {
    sourceMap: true,
    sass: { outputStyle: 'compressed' },
    autoprefixer: false
  });

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request

SASS-webpack-plugin is released under the MIT License.

About

[Deprecated] ๐ŸŒˆ Get your stylesheets together

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •