{"id":15020111,"url":"https://github.com/jalkoby/sass-webpack-plugin","last_synced_at":"2025-10-25T01:30:31.816Z","repository":{"id":57139529,"uuid":"84885949","full_name":"jalkoby/sass-webpack-plugin","owner":"jalkoby","description":"[Deprecated] 🌈 Get your stylesheets together","archived":false,"fork":false,"pushed_at":"2019-05-05T20:17:32.000Z","size":139,"stargazers_count":13,"open_issues_count":3,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-31T04:51:23.581Z","etag":null,"topics":["plugin","sass","scss","webpack2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jalkoby.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-13T23:57:40.000Z","updated_at":"2023-02-11T00:16:13.000Z","dependencies_parsed_at":"2022-09-05T01:11:15.922Z","dependency_job_id":null,"html_url":"https://github.com/jalkoby/sass-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jalkoby%2Fsass-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jalkoby%2Fsass-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jalkoby%2Fsass-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jalkoby%2Fsass-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jalkoby","download_url":"https://codeload.github.com/jalkoby/sass-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238053514,"owners_count":19408699,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["plugin","sass","scss","webpack2"],"created_at":"2024-09-24T19:54:36.389Z","updated_at":"2025-10-25T01:30:26.476Z","avatar_url":"https://github.com/jalkoby.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SASS-webpack-plugin\n\n## !!!! The package is not maintained anymore\n\n[![Build Status](https://travis-ci.org/jalkoby/sass-webpack-plugin.svg?branch=master)](https://travis-ci.org/jalkoby/sass-webpack-plugin)\n[![npm version](https://badge.fury.io/js/sass-webpack-plugin.svg)](https://badge.fury.io/js/sass-webpack-plugin)\n[![dependencies](https://david-dm.org/jalkoby/sass-webpack-plugin.svg)](https://david-dm.org/jalkoby/sass-webpack-plugin)\n\nGet your stylesheets together 😼. If you need [sass](http://sass-lang.com) + [autoprefixer](https://github.com/postcss/autoprefixer) + [webpack](https://webpack.js.org/) just do next:\n\n```bash\n  npm i -D webpack webpack-dev-server sass-webpack-plugin html-webpack-plugin html-webpack-template\n  # or\n  yarn add -D webpack webpack-dev-server sass-webpack-plugin html-webpack-plugin html-webpack-template\n```\n\n```js\n  // webpack.config.js\n  const SassPlugin = require('sass-webpack-plugin');\n  const HtmlPlugin = require('html-webpack-plugin');\n  const contentBase = path.join(__dirname, 'build');\n\n  module.exports = {\n    entry: './src/js/index.js',\n    plugins: [\n      new SassPlugin('./src/styles/index.scss', process.env.NODE_ENV),\n      new HtmlPlugin({\n        inject: false,\n        template: require('html-webpack-template'),\n        title: 'Sass webpack plugin',\n        links: [{ rel: 'stylesheet', type: 'text/css', href: '/index.css' }],\n        appMountId: 'app'\n      })\n    ],\n    module: {\n      // babel, linter, etc\n    },\n    output: {\n      path: contentBase,\n      filename: 'index.js'\n    },\n    devServer: (process.env.NODE_ENV === 'production') ? false : {\n      contentBase: contentBase,\n      compress: true,\n      port: 3000\n    }\n  };\n```\n\n## The reasons to use it\n\nIt's an **all-in-one solution for sass + webpack** without any limitations.\n\nHere are the reasons to use sass-webpack-plugin over \"x\"-loader:\n- easy to add and little to configure\n- generates a separate file (or a few if there is a need) which fits best for the production\n- completely compiled by node-sass, so styles doesn't slow down a webpack compilation\n- the native sass import instead of [a patch version of it](https://github.com/webpack-contrib/sass-loader#imports)\n\nHere are reasons why sass-webpack-plugin is not the best case:\n- you build a js library/app which should has a css inside js code\n- full page reload on a style change take a too much time in your time \n\n## Requirements\n\n**Webpack 2+**. The work with webpack 1.x is not tested so it's up to you 🤞\n\n## Config examples\n\n```js\n  // basic\n  new SassPlugin('./src/styles/index.scss');\n\n  // production ready\n  new SassPlugin('./src/styles/index.scss', process.env.NODE_ENV);\n\n  // multi files\n  new SassPlugin(['./src/styles/one.scss', './src/styles/two.sass'], process.env.NODE_ENV);\n\n  // a different output filename\n  new SassPlugin({ './src/styles/index.scss': 'bundle.css' }, process.env.NODE_ENV);\n\n  // with sass tuning\n  new SassPlugin('./src/styles/index.scss', process.env.NODE_ENV, {\n    sass: {\n      includePaths: [path.join(__dirname, 'node_modules/bootstrap-sass/assets/stylesheets')]\n    }\n  });\n\n  // with source maps + compressing - autoprefixing\n  new SassPlugin('./src/styles/index.scss', {\n    sourceMap: true,\n    sass: { outputStyle: 'compressed' },\n    autoprefixer: false\n  });\n```\n\n## Contributing\n\n1. Fork it\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create a new Pull Request\n\nSASS-webpack-plugin is released under the [MIT License](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjalkoby%2Fsass-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjalkoby%2Fsass-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjalkoby%2Fsass-webpack-plugin/lists"}