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

Question

我在使用相对路径编译 scss 时遇到问题。

这是我的文件结构:

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

主.scss:

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

字体.css:

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

如果您查看我的 fonts.css，src: url()，该 url 指向正确的文件，即 src/fonts/font1 .woff2。但是，在编译为 src/main.css 之后，src: url() 现在指向 src/font1.woff2 而不是退出。

这里针对 LESS 提出了一个类似的问题:LESS importing CSS and relative paths

我正在使用 sass CLI，这就是我目前拥有的:

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

我该如何解决这个问题？我可以将我的路径替换为始终从根文件夹指向，但这似乎不是一个好方法...

Answer 1

您混淆了 CSS 导入和 SASS 导入。

@import CSS 文件中的声明将导致浏览器下载导入的 css 文件，就好像它是另一个单独的文件一样 <style>在您的文档中标记。 所以导入文件中的所有路径都是相对于它自己的。

@import SCSS 文件中的语句将导致 SASS 编译器将导入的 css 文件编译到您的主 sass 输出中，就好像您已将其复制并粘贴到那里一样。 所以 SASS 文件中的路径总是相对于输出文件。

如评论中所述，最好不要将 .CSS 文件混入 .SCSS 文件中。而是始终对所有内容使用 SASS，您可以使用 SASS 变量来存储字体文件的路径。