How to use files from /assets in scss

sage
1

In my scss, I reference a file from the /assets folder like so:

.selector {
    background-image: url(../../images/svg/gears.svg);
}

Everything’s fine using yarn run start and yarn run build. However, when executing yarn run build:production the following error is thrown:

ERROR in ../~/css-loader?-sourceMap!../~/postcss-loader!../~/resolve-url-loader?-sourceMap!../~/sass-loader?-sourceMap!./styles/main.scss
    Module not found: Error: Can't resolve '../../images/svg/gears.svg' in '/Applications/MAMP/htdocs/openminds/wp-content/themes/hoang/assets/styles'
     @ ../~/css-loader?-sourceMap!../~/postcss-loader!../~/resolve-url-loader?-sourceMap!../~/sass-loader?-sourceMap!./styles/main.scss 6:194746-194783

How can I properly reference the assets folder so that it doesn’t break yarn build:production?

2

Use ../images, not ../../images

3

duh! forgot that it’s technically being referenced by main.scss, not the included file. Thanks @ben

4

Hi @ben
I’m actually using the correct syntax but I get error

Module build failed: Error: resolve-url-loader: CSS error
  predicate must return an absolute path or the result of calling next()

More details here:

Any idea? I’m spending hours and hours not finding solution :frowning:

5 Likes
5

I’m running into the same issue with the exact same error. It seems to not mind when I remove the quotes but doesn’t render on the page.