Save 37% off PRO during our Black Friday Sale! »

Smarter Sass builds with Webpack

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.

317e499b0a1a7f00cbbe58d365a4377f?s=128

Ben Smithett

April 01, 2015
Tweet

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…

  29. None
  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