search

maoberlehner / node-sass-magic-importer

Custom node-sass importer for selector specific imports, module importing, globbing support and importing files only once.
MIT License
292 stars 28 forks source link

Relative imports within CSS not working when compiling into single file #177

Closed haldunanil closed 6 years ago

haldunanil commented 6 years ago

Hi!

I have a build process that works as follows:

  1. Every React component has a bundled .scss file that imports a global main.scss in its first line to get access to project-level variables.
  2. I have a build.scss file that includes a single line @import "../../components/**/*.scss"; to grab all the .scss files throughout the project.
  3. On npm run build, my package runs the following script: node-sass ./src/styles/scss/build.scss ./src/styles/alfheim-react.css --importer node_modules/node-sass-magic-importer/dist/cli.js to join all those disparate .scss files into a single one.

Relative imports at the top of the file work perfectly fine, but when they're inserted into the CSS, they no longer work. For instance, I have the following lines:

content: "";
background-image: url("./right-bracket.svg");
background-repeat: no-repeat;

However, when I run the build process the background-image url remains the same relative path (i.e. ./right-bracket.svg), which results in the .scss file no longer being able to find the svg. Am I doing something wrong or is this a bug?

maoberlehner commented 6 years ago

Am I doing something wrong or is this a bug?

Nope. That's just how Sass works (https://github.com/sass/node-sass/issues/2218#issuecomment-358578777).

Depending on how you've configured webpack (e.g. with the resolve-url-loader) webpack can resolve relative URLs in your Sass code. But node-sass can't do that out of the box, this is the expected behavior and has nothing to do with node-sass-magic-importer.

You have to use paths relative to the output, not the source file. Or you can compile your CSS via webpack and the resolve-url-loader.