时间戳

首页 > 解决方案 > 从 index.html 导入 SCSS 文件不起作用

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

问题描述

我试图在我的根文件SCSS的标签中导入一个文件，但它没有加载。相反，在选项卡中，我看到我的文件标记为红色，状态为.headindex.htmlNetwork Chrome Dev ToolsSCSS(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>

标签： vue.jssassstylesheet

解决方案

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

如果你使用的是 vue。

在 vue 组件中。

像这样的代码：

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

推荐阅读