jalkoby / Sass Webpack Plugin
Licence: mit
[Deprecated] 🌈 Get your stylesheets together
Stars: ✭ 14
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Sass Webpack Plugin
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+9714.29%)
Mutual labels: plugin, scss, sass
Slinky
A light-weight, responsive, mobile-like navigation menu plugin
Stars: ✭ 649 (+4535.71%)
Mutual labels: plugin, sass
Sassy Starter
🎉 Sassy starter - HTML / SCSS (SMACSS)
Stars: ✭ 740 (+5185.71%)
Mutual labels: scss, sass
Redux Webpack Es6 Boilerplate
A starter project for modern React apps with Redux
Stars: ✭ 566 (+3942.86%)
Mutual labels: webpack2, sass
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+5107.14%)
Mutual labels: scss, sass
Siimple
The minimal CSS toolkit for flat and clean designs
Stars: ✭ 502 (+3485.71%)
Mutual labels: scss, sass
Sassmagic
Collection best of Sass mixins and function
Stars: ✭ 795 (+5578.57%)
Mutual labels: scss, sass
Webpack2 Express Heroku Starter
Starter app using Webpack 2, Express, setup to deploy to Heroku.
Stars: ✭ 12 (-14.29%)
Mutual labels: webpack2, sass
Uicookbook
A few recipes and build workflows for UI dev
Stars: ✭ 19 (+35.71%)
Mutual labels: scss, sass
Tabler
Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap
Stars: ✭ 24,611 (+175692.86%)
Mutual labels: scss, sass
Avalanche
Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system
Stars: ✭ 627 (+4378.57%)
Mutual labels: scss, sass
Typescript Plugin Css Modules
A TypeScript language service plugin providing support for CSS Modules.
Stars: ✭ 520 (+3614.29%)
Mutual labels: plugin, sass
Neat
Neat is maintained by the thoughtbot design team. It is funded by
thoughtbot, inc. and the names and logos for thoughtbot are
trademarks of thoughtbot, inc.
Stars: ✭ 4,506 (+32085.71%)
Mutual labels: scss, sass
Primitive
⛏️ A front-end design toolkit for developing web apps.
Stars: ✭ 783 (+5492.86%)
Mutual labels: scss, sass
SASS-webpack-plugin
!!!! The package is not maintained anymore
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
- 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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].