SASS / SCSS用相对路径sass cli编译css文件

Question

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...

Answer 1

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.