Smarter Sass builds with Webpack

A Sass-focused lightning talk version of this blog post: http://bensmithett.com/smarter-css-builds-with-webpack/

Here's the code used in the demo: https://github.com/bensmithett/webpack-css-example

Presented at MelbCSS, April 1 2015.

Transcript

1. SMARTER CSS BUILDS WITH WEBPACK Super fast lightning talk edition! @bensmithett Sass
2. Nobody writes plain old CSS in one big file any more
3. Use Sass! Modularize all the things!
4. config/ colors.scss media_queries.scss mixins/ breakpoint.scss modules/ btn.scss dropdown.scss header.scss
5. How do you turn that into a single bundle.css to send down to users?
6. Sass @import ?
7. @import "config/colors"; @import "config/media_queries"; @import "mixins/breakpoint"; @import "modules/btn"; @import "modules/dropdown"; @import "modules/header";
8. Shared global Sass scope
9. $red: #f00 @import "config/colors"; @import "config/media_queries"; @import "mixins/breakpoint"; @import "modules/btn"; @import "modules/dropdown"; @import "modules/header";
10. background: $red @import "config/colors"; @import "config/media_queries"; @import "mixins/breakpoint"; @import "modules/btn"; @import "modules/dropdown"; @import "modules/header"; $red: #f00
11. Does that remind you of anything?
12. <script src="jquery.js"></script> <script src="outrageous_slider_plugin.js"></script> <script src="underscore.js"></script> <script src="backbone.js"></script> <script src="my_app.js"></script>
13. <script src="jquery.js"></script> <script src="outrageous_slider_plugin.js"></script> <script src="underscore.js"></script> <script src="backbone.js"></script> <script src="my_app.js"></script> defines $
14. <script src="jquery.js"></script> <script src="outrageous_slider_plugin.js"></script> <script src="underscore.js"></script> <script src="backbone.js"></script> <script src="my_app.js"></script> defines $ uses $
15. <script src="jquery.js"></script> <script src="outrageous_slider_plugin.js"></script> <script src="underscore.js"></script> <script src="backbone.js"></script> <script src="my_app.js"></script> window.$ window.Backbone window._ window.MyApp $.fn.outrageousSliderPlugin
16. We don’t do that in JS any more. Instead we write small, self-contained modules that import their dependencies into their own local scope.
17. components/ dropdown.js header.js css/ btn.scss dropdown.scss header.scss
18. var React = require(“react”); var Dropdown = require(“./dropdown”); module.exports = React.createClass({ render () { return ( <div className=“header”> <Dropdown /> </div> ); } }); components/ dropdown.js header.js css/ btn.scss dropdown.scss header.scss
19. var React = require(“react”); var Dropdown = require(“./dropdown”); module.exports = React.createClass({ render () { return ( <div className=“header”> <Dropdown /> </div> ); } }); components/ dropdown.js header.js css/ btn.scss dropdown.scss header.scss
20. var React = require(“react”); var Dropdown = require(“./dropdown”); module.exports = React.createClass({ render () { return ( <div className=“header”> <Dropdown /> </div> ); } }); components/ dropdown.js header.js css/ btn.scss dropdown.scss header.scss
21. We can do that with Sass too, if… - we compile each file in isolation
 - we explicitly import each file’s dependencies
22. @import "config/colors"; @import "config/media_queries"; @import "mixins/breakpoint"; @import "modules/btn"; @import "modules/dropdown"; @import "modules/header";
23. @import "modules/btn"; @import "modules/dropdown"; @import "modules/header";
24. // modules/header.scss @import "config/colors"; .header { background: $red; }
25. Every Sass file compiled in its own private scope! Impossible to clobber variables across files Doesn’t depend on a specific, fragile order
26. components/ dropdown.js header.js css/ btn.scss dropdown.scss header.scss var React = require(“react”); var Dropdown = require(“./dropdown”); module.exports = React.createClass({ render () { return ( <div className=“header”> <Dropdown /> </div> ); } });
27. One of this component’s dependencies is in your head,
 not explicit in code!
28. UI components have non-JS dependencies CSS, fonts, images, etc…
30. Webpack supercharges require() to let you require all of a component’s dependencies
31. components/ dropdown.js header.js css/ btn.scss dropdown.scss header.scss var React = require(“react”); var Dropdown = require(“./dropdown”); module.exports = React.createClass({ render () { return ( <div className=“header”> <Dropdown /> </div> ); } });
32. components/ dropdown.js header.js css/ btn.scss dropdown.scss header.scss var React = require(“react”); var Dropdown = require(“./dropdown”); require (“css/header”); module.exports = React.createClass({ render () { return ( <div className=“header”> <Dropdown /> </div> ); } });
33. Automatically build a single bundle.css
 based on explicitly declared dependencies
 in components your app actually uses $ webpack
34. STOP! DEMOTIME! (I just showed https://github.com/bensmithett/webpack-css-example
 and what happens to the output CSS when you add or remove different components)
35. THANKS! • http://bensmithett.com/smarter-css-builds-with-webpack/ • https://github.com/bensmithett/webpack-css-example • http://webpack.github.io/ @bensmithett