Задать вопрос
@sannymary
css

Как подключить 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:\Users\kutjk\OneDrive\Рабочий стол\Асгард\2023\попытка миллион\style.css">
	</head>
	<body>
		<p>Lorem ipsum</p>
	</body>
	</html>

Даже не знаю уже, что сделать, кажется, что все перепробовала)
  • Вопрос задан
  • 3298 просмотров
3 комментария
Подписаться 1 Простой 3 комментария
Решения вопроса 1
UnluckySerivelha
@UnluckySerivelha
К html подключается CSS, а не SCSS.
Если вы работаете с SCSS, вам нужно скомпилировать его в CSS. С помощью gulp, webpack или еще какого-либо таскраннера/сборщика.

Если .css лежит рядом с .html, подключать его лучше так:
<link rel="stylesheet" type="text/css" href="style.css">
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
semyonfedoseev
@semyonfedoseev
Могу загуглить вместо тебя
Прибегайте к сборщикам в случае крайней необходимости.
Вот так может выглядеть реализация в 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">


Источник: https://github.com/sreegithub19/programming_langua...
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать простой зеро блок на тильда или html блок
02 мая 2024, в 11:31
500 руб./за проект
Ищем кодера для доработки сайта на bitrix24
02 мая 2024, в 11:28
1000 руб./в час
Доработать квиз на React
02 мая 2024, в 11:14
5000 руб./за проект
Ещё заказы