Question

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

这是我的文件结构：

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');
}

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

这里有一个类似的问题，要求更少：LESS importing CSS and relative paths

我使用的是青菜和CLI这就是我目前的样子：

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

我将如何解决此问题？我可以取代我的路径总是从根文件夹点，但是这似乎并不像一个好办法...

Answer 1

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

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

SCSS文件中的<style>语句将使SASS编译器将导入的css文件编译到您的主sass输出中，就好像您已在其中复制并粘贴了该文件一样。 因此，SASS文件中的路径始终相对于输出文件。

如评论中所述，最好不要将.CSS文件混合到您的.SCSS文件中。而是始终使用SASS进行所有操作，并且可以使用SASS变量来存储字体文件的路径。

与相对路径SASS CLI SASS / SCSS编译CSS文件

1 个答案: