为什么我的 .scss“代码”在我的 html 页面中不起作用答案

【问题标题】：Why won't my .scss "code" take effect in my html page为什么我的 .scss“代码”在我的 html 页面中不起作用
【发布时间】：2020-12-19 14:15:59
【问题描述】：

我很难理解为什么我的 .scss 文件不会影响我的 html 代码。

SCSS 代码：

@import url("https://fonts.googleapis.com/css2?family=Open:ital,wght@0,300;0,700;1,400&display=swap")
 
 
:root {
  --color-grey-dark: #202326;
  --color-green: #42b680;
  --color-purple: #7288da;
}
 
* {
  box-sizing: border-box;
}
 
body {
  font-family: "Open Sans";
  padding: 0;
  margin: 0;
}
 
 
.test {
  background: var(--color-grey-dark);
  height: 100%;
  width: 72px;
  display: flex;
}

<head>
<link rel="stylesheet" type="text/css" href={{ url_for("static", filename="main.scss") }}>
</head>
<body>
<div class="test">
    <span>TEXT</span><br>
</div>
</body>

顺便说一句，这是所有测试代码。

我转到页面，它对页面没有影响。

我已经确定它实际上也在查找文件，我每次都看到 200 个。

如果有帮助，我正在使用 Python 网络框架：Flask。

【问题讨论】：

在提供给客户端浏览器之前，您需要将 SCSS 编译为 CSS
如果您使用 VS 代码，请在市场中使用 watch SASS 扩展将 sSCSS 编译为 CSS

标签： html css sass

【解决方案1】：

您在 google 字体导入结束时缺少分号 ;...

@import url("https://fonts.googleapis.com/css2?family=Open:ital,wght@0,300;0,700;1,400&display=swap");

请参阅此处的小提琴，其中包含分号和 scss 已编译...

https://jsfiddle.net/joshmoto/5hmgx2t6/1/

【讨论】：

为什么 Flask 在编译为 CSS 时不会抛出错误，这超出了我的理解......
我在使用 npm 在 sass 中编译 google fonts css2 import url 时遇到了问题，它可能是 google css2 url 中的 @ 或 : 吗？我不得不恢复到 google css1 url，找不到解决方法。

【解决方案2】：

将filename="main.scss" 更改为filename="main.css"。浏览器只理解 CSS，而不是它编译的 SCSS。

【讨论】：

【解决方案3】：

您需要先将 SCSS 编译为 CSS，然后再提供给客户端站点。

请点击官方链接了解更多 sass ： https://sass-lang.com/guide

【讨论】：