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.

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