Question

我正在尝试在根SCSS文件的head标记内导入index.html文件，但无法加载。相反，在Network Chrome Dev Tools标签中，我的SCSS文件以红色标记，状态为(canceled)。

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

<!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的回答进行操作

从index.html导入SCSS文件不起作用

2 个答案: