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
   

   View Slide

2. Nobody writes plain old CSS in one big file any more
   

   View Slide

3. Use Sass!
   Modularize all the things!
   

   View Slide

4. config/
   colors.scss
   media_queries.scss
   mixins/
   breakpoint.scss
   modules/
   btn.scss
   dropdown.scss
   header.scss
   

   View Slide

5. How do you turn that into a single
   bundle.css
   to send down to users?
   

   View Slide

6. Sass @import ?
   

   View Slide

7. @import "config/colors";
   @import "config/media_queries";
   @import "mixins/breakpoint";
   @import "modules/btn";
   @import "modules/dropdown";
   @import "modules/header";
   

   View Slide

8. Shared global Sass scope
   

   View Slide

9. $red: #f00
   @import "config/colors";
   @import "config/media_queries";
   @import "mixins/breakpoint";
   @import "modules/btn";
   @import "modules/dropdown";
   @import "modules/header";
   

   View Slide

10. background: $red
    @import "config/colors";
    @import "config/media_queries";
    @import "mixins/breakpoint";
    @import "modules/btn";
    @import "modules/dropdown";
    @import "modules/header";
    $red: #f00
    

    View Slide

11. Does that remind you of anything?
    

    View Slide

12. 
    
    
    
    
    

    View Slide

13. 
    
    
    
    
    defines $
    

    View Slide

14. 
    
    
    
    
    defines $
    uses $
    

    View Slide

15. 
    
    
    
    
    window.$
    window.Backbone
    window._
    window.MyApp
    $.fn.outrageousSliderPlugin
    

    View Slide

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.
    

    View Slide

17. components/
    dropdown.js
    header.js
    css/
    btn.scss
    dropdown.scss
    header.scss
    

    View Slide

18. var React = require(“react”);
    var Dropdown = require(“./dropdown”);
    module.exports = React.createClass({
    render () {
    return (
    
    
    
    );
    }
    });
    components/
    dropdown.js
    header.js
    css/
    btn.scss
    dropdown.scss
    header.scss
    

    View Slide

19. var React = require(“react”);
    var Dropdown = require(“./dropdown”);
    module.exports = React.createClass({
    render () {
    return (
    
    
    
    );
    }
    });
    components/
    dropdown.js
    header.js
    css/
    btn.scss
    dropdown.scss
    header.scss
    

    View Slide

20. var React = require(“react”);
    var Dropdown = require(“./dropdown”);
    module.exports = React.createClass({
    render () {
    return (
    
    
    
    );
    }
    });
    components/
    dropdown.js
    header.js
    css/
    btn.scss
    dropdown.scss
    header.scss
    

    View Slide

21. We can do that with Sass too, if…
    - we compile each file in isolation

    - we explicitly import each file’s dependencies
    

    View Slide

22. @import "config/colors";
    @import "config/media_queries";
    @import "mixins/breakpoint";
    @import "modules/btn";
    @import "modules/dropdown";
    @import "modules/header";
    

    View Slide

23. @import "modules/btn";
    @import "modules/dropdown";
    @import "modules/header";
    

    View Slide

24. // modules/header.scss
    @import "config/colors";
    .header {
    background: $red;
    }
    

    View Slide

25. Every Sass file compiled in its own private scope!
    Impossible to clobber variables across files
    Doesn’t depend on a specific, fragile order
    

    View Slide

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 (
    
    
    
    );
    }
    });
    

    View Slide

27. One of this component’s dependencies is in your head,

    not explicit in code!
    

    View Slide

28. UI components have non-JS dependencies
    CSS, fonts, images, etc…
    

    View Slide

29. View Slide

30. Webpack supercharges require() to let you require all of a
    component’s dependencies
    

    View Slide

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 (
    
    
    
    );
    }
    });
    

    View Slide

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 (
    
    
    
    );
    }
    });
    

    View Slide

33. Automatically build a single bundle.css

    based on explicitly declared dependencies

    in components your app actually uses
    $ webpack
    

    View Slide

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)
    

    View Slide

35. THANKS!
    • http://bensmithett.com/smarter-css-builds-with-webpack/
    • https://github.com/bensmithett/webpack-css-example
    • http://webpack.github.io/
    @bensmithett
    

    View Slide