Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sass compilation speed decreases dramatically when using url()

See original GitHub issue

I have discovered that compiling sass takes considerably more time when my stylesheet includes url() references. Take for example the following CSS:

/* Web Fonts */
@font-face { font-family: "FontAwesome"; font-style: normal; font-weight: 400; src: local("Font Awesome"), local(FontAwesome-Regular), url("/fnt/FontAwesome-Regular.woff2") format("woff2") }
@font-face { font-family: "Proxima Nova"; font-style: normal; font-weight: 400; src: local("Proxima Nova"), local(ProximaNova-Regular), url("/fnt/ProximaNova-Regular.woff2") format("woff2") }
@font-face { font-family: "Proxima Nova"; font-style: normal; font-weight: 700; src: local("Proxima Nova Bold"), local(ProximaNova-Bold), url("/fnt/ProximaNova-Bold.woff2") format("woff2") }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; src: local("Roboto"), local(Roboto-Regular), url("/fnt/Roboto-Regular.woff2") format("woff2") }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; src: local("Roboto Bold"), local(Roboto-Bold), url("/fnt/Roboto-Bold.woff2") format("woff2") }
@font-face { font-family: "Oleo Script"; font-style: normal; font-weight: 400; src: local("Oleo Script"), local(OleoScript-Regular), url("/fnt/OleoScript-Regular.woff2") format("woff2") }

Without these lines, my compilation time is 372ms, but with these lines included, it jumps to 3207ms.

It seems with each additional use of url() (for example, background-image), the compilation time increases and quickly becomes unusable. Particularly for nom run watch (over 3 seconds).

Issue Analytics

State:
Created 7 years ago
Reactions:6
Comments:9 (2 by maintainers)

Top GitHub Comments

32reactions

syntagcommented, Mar 1, 2017

@JeffreyWay It is still slow. Do I need to install fast-sass-loader manually or something? If your Sass contains 15 different image URLs, it can take over 17 seconds!

Edit: Just saw, you reverted the fast-sass-loader back to the slow-loader 466af83… Any word on why we can’t use fast-sass-loader?

Edit2: After more digging around, I found that the way to fix this is to add .options({processCssUrls: false}) to webpack.mix.js, hope this helps someone.

5reactions

JeffreyWaycommented, Jan 30, 2017

Yeah this is from the resolve-url-loader. It slows everything down drastically. It seems to be necessary to get Bootstrap to compile properly.

Let me research this a bit and find a fix.

Top Results From Across the Web

Sass compilation speed decreases dramatically when using url()

Yeah this is from the resolve-url-loader. It slows everything down drastically. It seems to be necessary to get Bootstrap to compile properly.

Ways to speed up scss during watch compiling in Webpack

1 Answer 1 · Sass becomes slowly as many SASS files are included to the process. Big SASS-Frameworks tend to use a lot...

Compile time CSS-in-JS vs CSS-in-JS vs CSS Modules vs SASS

Main difference that under the hood Linaria create a wrapper component that for dynamic styles will use css-variables, it is dramatically speed ......

A Proof of Concept for Making Sass Faster - CSS-Tricks

But, as the amount of Sass grows, compilation time increases. This is far from ideal.

VSCode Extension - Live Sass Compiler - GitHub Pages

Compile Sass or Scss to CSS at realtime! ... Fix a bug where meta.load-css() would sometimes resolve relative URLs incorrectly when called from...