# Compiled CSS doesn't work as it should in production

**URL:** https://discourse.roots.io/t/compiled-css-doesnt-work-as-it-should-in-production/9977
**Category:** sage
**Tags:** webpack, sage9
**Created:** 2017-07-12T13:34:29Z
**Posts:** 22
**Showing post:** 17 of 22

## Post 17 by @sandrowuermli — 2018-02-18T19:59:49Z

**A ‘Clean’ Workaround**

**TL;DR**

**1.**  
In Your `assets/styles/main.scss` insert at the top of the file _(yes, before `@import "common/variables";`, we need the functions for `str-replace()`)_:

```
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
```

**2.**  
In Your `styles/common/_variables.scss` insert:

```
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{str-replace(str-replace(#{$navbar-dark-color}, "(", "%28"), ")", "%29")}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
$navbar-light-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{str-replace(str-replace(#{$navbar-light-color}, "(", "%28"), ")", "%29")}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
```

* * *

**Detail**

The Problem aren’t the spaces. The brackets from the `stroke='#{$navbar-dark-color}'` causes the problem. So if we `str-replace()` the `(` with `%28` and the `)` with `%29` you can run `yarn run build:production` without removing your scss.

---

_[View the full topic](https://discourse.roots.io/t/compiled-css-doesnt-work-as-it-should-in-production/9977)._