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.

Using url in SCSS mixin in another file doesn't import files correctly

See original GitHub issue

Reopened from #7598 because I didn’t see an option to actually re-open that issue.

Describe the bug

Using an SCSS mixin (located in another file) that uses the url function makes the file unable to be found. Example:

// src/scss/mixins.scss

@mixin next-gen-image ($file-name, $fallback-ext) {
  .webp-supported & {
    background-image: url('#{$file-name}.webp');

  .webp-not-supported & {
    background-image: url('#{$file-name}.#{$fallback-ext}');
// src/jsx/routes/Home.scss
@import './../../scss/mixins';

.my-class {
  @include next-gen-image('some-image', 'jpg');

This should try to lookup src/jsx/routes/some-image.webp and src/jsx/routes/some-image.jpg but it instead tries to look for src/scss/some-image.webp and src/scss/some-image.jpg respectively.

This was working prior to 3.1.x.

Did you try recovering your dependencies?


Which terms did you search for in User Guide?



    OS: macOS High Sierra 10.13.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.6.0 - ~/.nvm/versions/node/v10.15.0/bin/npm
    Chrome: 76.0.3809.132
    Firefox: 65.0.1
    Safari: 11.1
    react: 16.9.0 => 16.9.0
    react-dom: 16.9.0 => 16.9.0
    react-scripts: 3.1.1 => 3.1.1
    create-react-app: Not Found

Steps to reproduce

See code snippet above. Alternatively, see

Expected behavior

It should import the local image files correctly

Actual behavior

It does not import local image files correctly


Reproducible demo

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

thinkerelwincommented, Oct 5, 2019

got similar problems too,

my case is I’ve a main scss in ‘src/assets/scss/App.scss’

it contains

@import "./components/icons";

then in ‘src/assets/scss/components/icons.scss’

it contains

.icon-check-o {
  background-image: url(../img/pc_w_icon_condition_done_large.png);

the image is stored in ‘src/assets/img/pc_w_icon_condition_done_large.png’

when I update my react-script from 3.0.1 to 3.2.0, got an error when ‘npm run build’, says can’t find that image

ianschmitzcommented, Jan 31, 2020

Fixed in #8281. Released in 3.3.1

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can SASS mixins and variables sit in different files?
The short answer is you dont have to import them into everyfile that might include them. However there does need to be a...
Read more >
Sass: @import
Any mixins, functions, and variables from the imported file are made available, and all its CSS is included at the exact point where...
Read more >
Sass · Bootstrap v5.0
Utilize our source Sass files to take advantage of variables, maps, mixins, ... We suggest using the full import stack from our bootstrap.scss...
Read more >
Features In-Depth | Less.js
Less extends CSS with dynamic behavior such as variables, mixins, ... only the current file and calling files were considered when looking for...
Read more >
Features | Vite
In addition, relative url() references inside imported Sass/Less files that are in different directories from the root file are also automatically rebased ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found