SASS-webpack-plugin
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 = ; const HtmlPlugin = ; const contentBase = path; moduleexports = entry: './src/js/index.js' plugins: './src/styles/index.scss' processenvNODE_ENV inject: false 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: processenvNODE_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 './src/styles/index.scss'; // production ready './src/styles/index.scss' processenvNODE_ENV; // multi files './src/styles/one.scss' './src/styles/two.sass' processenvNODE_ENV; // a different output filename './src/styles/index.scss': 'bundle.css' processenvNODE_ENV; // with sass tuning './src/styles/index.scss' processenvNODE_ENV sass: includePaths: path ; // with source maps + compressing - autoprefixing './src/styles/index.scss' sourceMap: true sass: outputStyle: 'compressed' autoprefixer: false ;
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request
SASS-webpack-plugin is released under the MIT License.