Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Smarter Sass/Less Builds with Webpack (MelbJS E...

Smarter Sass/Less Builds with Webpack (MelbJS Edition)

A talk I gave at MelbJS on 13/5/2015

Ben Smithett

May 13, 2015
Tweet

More Decks by Ben Smithett

Other Decks in Technology

Transcript

  1. 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.
  2. import React from “react”; import Dropdown from “./dropdown”; export default

    React.createClass({ render () { return ( <div className=“header”> <Dropdown /> </div> ); } }); components/ dropdown.js header.js css/ btn.scss dropdown.scss header.scss
  3. import React from “react”; import Dropdown from “./dropdown”; export default

    React.createClass({ render () { return ( <div className=“header”> <Dropdown /> </div> ); } }); components/ dropdown.js header.js css/ btn.scss dropdown.scss header.scss
  4. import React from “react”; import Dropdown from “./dropdown”; export default

    React.createClass({ render () { return ( <div className=“header”> <Dropdown /> </div> ); } }); components/ dropdown.js header.js css/ btn.scss dropdown.scss header.scss
  5. We can do that with Sass & Less too, if…

    - we execute (compile to CSS) each file its own scope
 - we explicitly import each file’s dependencies
  6. Every Sass/Less file runs in its own private scope! Impossible

    to clobber variables across files Doesn’t depend on a specific, fragile order
  7. components/ dropdown.js header.js css/ btn.scss dropdown.scss header.scss import React from

    “react”; import Dropdown from “./dropdown”; export default React.createClass({ render () { return ( <div className=“header”> <Dropdown /> </div> ); } });
  8. Webpack supercharges require()
 (or import if you’re writing ES6)
 to

    let you require all of a component’s dependencies Including the non-JS ones!
  9. components/ dropdown.js header.js css/ btn.scss dropdown.scss header.scss import React from

    “react”; import Dropdown from “./dropdown”; export default React.createClass({ render () { return ( <div className=“header”> <Dropdown /> </div> ); } });
  10. components/ dropdown.js header.js css/ btn.scss dropdown.scss header.scss import React from

    “react”; import Dropdown from “./dropdown”; import “css/header”; export default React.createClass({ render () { return ( <div className=“header”> <Dropdown /> </div> ); } });
  11. THIS IS AWESOME! • No manually maintained CSS manifest •

    bundle.css only contains CSS that your app actually uses • Great for building multiple apps from a common set of UI components • Or multiple entrypoints into one app - if user visits /profile, don’t send down CSS for components specific to /timeline or 
 /settings yet
  12. OUR TEAM IS HIRING! envato.com/careers or @bensmithett ✨ Building a

    very cool brand new product - help us shape it! ✨ ✨ React/Flux/Immutable, Webpack, Babel, Sass & Rails ✨ ✨ Tiny, independent, remote-friendly team inside Envato ✨ (don’t worry, the Rails asset pipeline is a distant memory )