从 index.html 导入 SCSS 文件无效

Question

我试图在根 index.html 文件的 head 标签内导入一个 SCSS 文件，但它没有加载。相反，在 Network Chrome Dev Tools 选项卡中，我看到我的 SCSS 文件标记为红色，状态为 (canceled).

知道为什么吗？这是我在 index.html 中导入我的 SCSS 文件的方法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <style>
      @import 'styles/main.scss';
    </style>
  </head>

Answer 1

您不能将 scss 文件直接导入到 html 文件中。

如果你使用的是 vue.

在vue组件中。

这样的代码：

<style scoped lang="scss">
@import 'styles/main.scss';
</style>

Answer 2

如果你直接使用 HTML，你必须先用编译器将你的 scss 转换成 CSS。您的浏览器不会将 scss 读取为 CSS。编译很容易，你可以使用命令行，像 Koala 或 prepros 这样的软件。如果您使用的是 Vue，请按照 Hank 在他的回复中所说的进行操作

Answer 3

您不能将 SASS/SCSS 文件“附加”到 HTML 文档。 SASS/SCSS 是一个 CSS 预处理器，它在服务器上运行并编译为您的浏览器可以理解的 CSS 代码。如果您将 sass 附加到 HTML 文件中，那么您的 浏览器将无法理解它。 所以不要尝试使用它。

从 index.html 导入 SCSS 文件无效

Importing SCSS file from index.html doesn't work

sass

stylesheet

vue.js