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

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.

Avatar for Ben Smithett

Ben Smithett

April 01, 2015
Tweet

More Decks by Ben Smithett

Other Decks in Programming

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. 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
  3. 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
  4. 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
  5. We can do that with Sass too, if… - we

    compile each file in isolation
 - we explicitly import each file’s dependencies
  6. Every Sass file compiled 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 var React =

    require(“react”); var Dropdown = require(“./dropdown”); module.exports = React.createClass({ render () { return ( <div className=“header”> <Dropdown /> </div> ); } });
  8. 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> ); } });
  9. 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> ); } });