Importing SCSS file from index.html doesn't work

I'm trying to import a SCSS file within the head tags in my root index.html file, but it doesn't load. Instead, in Network Chrome Dev Tools tab I see my SCSS file marked in red with a status of (canceled).

Any idea why? Here's how I import my SCSS file in 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>

Solution

you can not import scss file directly into a html file.

if you are using vue.

in the vue component.

code like this:

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