Search code examples
cssgitsassproduction

Do you need to deploy SASS in production?

Do we need to include the SASS file in production? Can't we just deploy the compiled CSS output? How do you guys deploy your CSS/SCSS code in production?

If any of you don't include SCSS in production how do you deal with version control like Git. I assume the master version should have the SCSS file there, but pulling from production environment it should be excluded? Is this problematic?

I just want to see what the most efficient way to do this.

The reason I asked this is because, using Chrome DevTools lately I've been seeing scss files as source. To see what I mean, if you go to getbootstrap.com and inspect its styles, you'll see scss as the source.

Solution

  • The browser does not render or understand SASS code. Thus serving such files for the sake of styling not only is not required but it doesn't even work¹.

    ¹ Well, yeah, it can work—there're many SASS implementation, including a JavaScript one that can be used in a browser.

    The SASS code you see in your browser's developer tools (not just Chrome) is a developer tool. In order to diagnose CSS issues you can instruct your SASS compiler to generate source maps. A source map is a document that links positions in your possibly minified CSS files to the SASS source code it comes from. When you open your developer tools and the CSS file declares a source map (example):

    /*!
 * Bootstrap v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f[…]
/*# sourceMappingURL=bootstrap.min.css.map */

    … the browser downloads the map (example) which in turn links the corresponding SASS source code files.

    {"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss"[…]

    Together with the file/line/column mapping information, developer tools can reconstruct the SASS code where a given element styles come from.

    "mappings":"AAAA;;;;;ACAA,MAGI,OAAA,QAAA,SAAA,QAAA,SAAA,QAAA,[…]

    The source files are obviously not required. Whether to include them or not depends on factors like:

    1. Is it okay to distribute them or they contain stuff that's meant to remain private like internal comments or intellectual property?

    2. Do you need to diagnose stuff in the live site?

    Get Bootstrap