1

I'm having issues compiling scss with relative paths.

Here is my file structure:

src/
├── css/
│   ├── bootstrap.scss
│   ├── main.scss
├── fonts/
│   ├── fonts.css
│   ├── font1.woff2
├── index.html
├── main.css    /* Compiled css */

main.scss:

@import './bootstrap-init';
@import '../fonts/fonts';

fonts.css:

@font-face {
  font-family: 'font1';
  src: url('./font1.woff2') format('woff2');
}

If you look at my fonts.css, src: url(), the url is pointing to the right file which is src/fonts/font1.woff2. However, after when its compiled to src/main.css, src: url() now points to src/font1.woff2 which does not exits.

A similar question asked here for LESS: LESS importing CSS and relative paths

I'm using sass CLI and this is what I have at the moment:

sass --watch css/main.scss main.css

How would I go about fixing this issue? I can replace my paths to always point from the root folder, but that doesn't seem like a good approach...

Ikhlak S.
  • 8,578
  • 10
  • 57
  • 77
  • Can I suggest you use SCSS for the font file too, rather than blending CSS and SCSS? I recommend moving `font.css` into the `src/css/` folder. and then referencing the font from there as `../fonts/font1.woff2` – BenHerbert Feb 03 '19 at 11:07

1 Answers1

0

You are mixing up CSS imports and SASS imports.

The @import statement in a CSS file will cause the browser to download the imported css file as if it were another separate <style> tag in your document. So all the paths in that imported file are relative to itself.

The @import statement in a SCSS file will cause the SASS compiler to compile the imported css file into your main sass output as if you had copied and pasted it in there. So the paths in a SASS file are always relative to the outputted file.

As mentioned in the comments, it's a good idea not to mix .CSS files into your .SCSS files. Rather always use SASS for everything and you can use SASS variables to store the path to the font files.

Mikepote
  • 6,042
  • 3
  • 34
  • 38
  • Just changing it to a scss file didn't work, for some reason I had to go back and then back into `fonts` folder and ended up with `url('.,/fonts/font1.woff2')` – Ikhlak S. Feb 04 '19 at 21:54
  • It wont work just changing it to a scss file, you also have to make all your paths in all your scss files relative to your root. That's how I always do it and I think it's easier to always think of your SCSS as being relative to your `main.css` file output path. – Mikepote Feb 05 '19 at 09:09