Как подключить SCSS к html?
Только что начала изучать scss и столкнулась с такой проблемой - scss и css взаимодействуют только между собой, но не с html. Работаю на компиляторе Prepros. Все файлы находятся на одном уровне, раньше с css таких проблем не возникало. В html все выглядит так:
<DOCTYPE html> <html lang="ru"> <head> <title>scss</title> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="C:UserskutjkOneDriveРабочий столАсгард2023попытка миллионstyle.css"> </head> <body> <p>Lorem ipsum</p> </body> </html> |
<DOCTYPE html> <html lang="ru"> <head> <title>scss</title> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="C:UserskutjkOneDriveРабочий столАсгард2023попытка миллионstyle.css"> </head> <body> <p>Lorem ipsum</p> </body> </html>
Даже не знаю уже, что сделать, кажется, что все перепробовала)
Дополнительно:
такой путь не будет работать
2. Так файлы не подключаются. Браузер не позволит их загрузить. Попробуйте просто href="style.css"
Но я не помню, будет ли оно вообще работать при запуске из файловой системы.
Поставьте web сервер и запускайте через него. Под винду полно WAMP сборок, которые устанавливаются в один клик.
Рабочий столАсгард2023попытка миллион
путь с кириллицей будет приносить еще множество проблем,
Prepos - простое, удобное и платное решение, но костыль -костылем.
если хотите препроцессоры и пр. нужно в минимуме осваивать консоль
например в случае scss - https://sass-lang.com/install/#command-line
К html подключается CSS, а не SCSS.
Если вы работаете с SCSS, вам нужно скомпилировать его в CSS. С помощью gulp, webpack или еще какого-либо таскраннера/сборщика.
Если .css лежит рядом с .html, подключать его лучше так:
<link rel="stylesheet" type="text/css" href="style.css"> |
<link rel="stylesheet" type="text/css" href="style.css">
- Спасибо, это было настолько очевидно, что даже обидно)
Ответы:
Прибегайте к сборщикам в случае крайней необходимости.
Вот так может выглядеть реализация в HTML:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.12/sass.sync.min.js"></script> <style type="scss"> @mixin l2d($color,$strength){ background:linear-gradient(lighten($color,$strength),darken($color,$strength)); &:active{ background:linear-gradient(darken($color,$strength),lighten($color,$strength)); } } body{ @include l2d(#aa2424,10%); min-height:100vh; } #hello{ margin:auto auto auto auto; width:96vw; user-select:none; &:after{ content:" "; } } </style> <script> Sass.compile(document.querySelector("style[type=scss]").innerHTML,function(res){ var s=document.createElement("style"); s.innerHTML=res.text; res.formatted&&console.error(res.formatted); //if error console.error it. res.text&&document.head.appendChild(s);// append style element only if no error. }); </script> </head> <body> <h1 id="hello">Hello, this is styled using SCSS.</h1> </body> </html> |
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.12/sass.sync.min.js"></script> <style type="scss"> @mixin l2d($color,$strength){ background:linear-gradient(lighten($color,$strength),darken($color,$strength)); &:active{ background:linear-gradient(darken($color,$strength),lighten($color,$strength)); } } body{ @include l2d(#aa2424,10%); min-height:100vh; } #hello{ margin:auto auto auto auto; width:96vw; user-select:none; &:after{ content:" "; } } </style> <script> Sass.compile(document.querySelector("style[type=scss]").innerHTML,function(res){ var s=document.createElement("style"); s.innerHTML=res.text; res.formatted&&console.error(res.formatted); //if error console.error it. res.text&&document.head.appendChild(s);// append style element only if no error. }); </script> </head> <body> <h1 id="hello">Hello, this is styled using SCSS.</h1> </body> </html>
Вы можете вынести стили в отдельный файл:
<link rel="stylesheet" type="scss" href="style.scss"> |
<link rel="stylesheet" type="scss" href="style.scss">
Источник: https://github.com/sreegithub19/programming_langua...
- вы серьезно ?
- modelair, Проверьте, это работает
- когда линкую с помощью файла у меня не работает
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1 Источник</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.12/sass.sync.min.js"></script> <link rel="stylesheet" type="scss" href="style.scss"> <script src="/scss-compiller.js"></script> </head> <body> <h1 id="hello">Hello, this is styled using SCSS.</h1> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1 Источник</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.12/sass.sync.min.js"></script> <link rel="stylesheet" type="scss" href="style.scss"> <script src="/scss-compiller.js"></script> </head> <body> <h1 id="hello">Hello, this is styled using SCSS.</h1> </body> </html>
Когда прописываю через тэг style все работает
Код точь в точь из гайда
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы подключить SCSS к HTML, вам необходимо выполнить несколько шагов. Ниже приведен пример того, как это можно сделать:
1. Установите препроцессор SCSS на вашем компьютере. Для этого вам понадобится установить Node.js и пакетный менеджер npm. После установки Node.js выполните команду в командной строке:
npm install -g sass
2. Создайте файл стилей с расширением .scss, например, styles.scss, и напишите в нем ваш CSS код, используя синтаксис SCSS.
3. Скомпилируйте файл SCSS в CSS с помощью установленного препроцессора. Для этого выполните команду:
sass styles.scss styles.css
4. Подключите скомпилированный CSS файл к вашему HTML документу с помощью тега link внутри тега head:
Теперь ваш SCSS код будет скомпилирован в CSS и применен к вашему HTML документу. Таким образом, вы успешно подключили SCSS к HTML.