Импорт файла SCSS из index.html не работает - PullRequest
Новая
       11

Импорт файла SCSS из index.html не работает

0 голосов
/ 13 декабря 2018

Я пытаюсь импортировать файл 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>

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Если вы используете прямой HTML, вы должны сначала преобразовать свой scss в CSS с помощью компилятора.Ваш браузер не читает scss как CSS.Компиляция проста, вы можете использовать командную строку, программное обеспечение, как Koala или Prepros.Если вы используете Vue, делайте то, что сказал Хэнк в своем ответе

0 голосов
/ 13 декабря 2018

вы не можете импортировать scss файл непосредственно в html-файл.

, если вы используете vue.

в компоненте vue.

код, подобный этому:

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