时间戳

首页 > 解决方案 > SASS/SCSS 用相对路径编译 css 文件 sass cli

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

问题描述

我在使用相对路径编译 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

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

标签： csssass

解决方案

您正在混淆 CSS 导入和 SASS 导入。

CSS 文件中的@import语句将导致浏览器下载导入的 css 文件，就好像它是<style>文档中的另一个单独的标签一样。因此，该导入文件中的所有路径都是相对于自身的。

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

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

推荐阅读