Блог

Главная - Вопросы по программированию - SASS не работает в Visual Studio Code 1.33.0

SASS не работает в Visual Studio Code 1.33.0

#css #sass

#css #sass

Вопрос:

Начал использовать Visual studio code для SASS. Создал простой HTML, как показано ниже.

 <!DOCTYPE html>
   <html>
       <head>
        <title>SCSS Test</title>
        <link rel="stylesheet" href="./styles/main.scss">
       </head>
       <body>
           <header>
               <h1> Hello SCSS </h1>
               <button>Hello</button>
           </header>
           <div>
             <button>Submit</button>
             <div>
               <h1> Our Contact Info </h1>
               <p class="">This is our info</p>
             </div>
           </div>
        </body>
    </html>

Добавлена папка с именем «styles», в которой я создал файл «main.scss», как показано ниже, и использовал расширение «Live Sass Compiler» для создания файла CSS и файла карты.

Файл SCSS:

 $primaryHeaderBack : lightblue;

header {
    background: $primaryHeaderBack;
}

Ожидаемый результат:

Цвет фона заголовка отображается не светло-синим, а белым. Что мне делать, чтобы увидеть желаемый результат? Пожалуйста, помогите мне.

Комментарии:

1. Я думаю, вы должны вызывать свой .css файл (который автоматически создается компилятором) в вашем html, а не в вашем .scss файле 🙂

2. Это означает, что мы используем обычный html css, но есть много преимуществ использования SCSS, таких как использование переменных, вложенность atc.

3. Когда вы используете sass (с «живым компилятором sass»), это создает файл .css в той же папке (или где-то еще, в зависимости от того, как вы настроили плагин) для использования вашим сайтом. Вы все еще используете sass для его создания, поэтому вы все равно сможете использовать переменные и вложенность.

4. Привет, Coops … спасибо за ваш совет… Это сработало… Вместо использования файла .scss его .css, мы должны использовать. Позже я подумал по-вашему, я нашел, что это имеет смысл, мы напишем .scss, он сгенерирует .css, который мы должны использовать в качестве ссылки в нашем HTML. Большое спасибо!!

Ответ №1:

@Moibabrata , @coops попросил вас связать ваш файл CSS с вашим HTML, потому что после запуска компилятора live SASS файлы SASS преобразуются в файлы CSS, поскольку HTML-файл не может понять .sass, вы должны использовать .css, но не волнуйтесь, в вашем файле .css будет все, что вам нужновведите внутри вашего файла .sass.

Вам не нужно когда-либо изменять свой файл .css, все, что вы делаете в файле .sass, будет автоматически обновляться в файле .css.

Поэтому вместо этого : <link rel="stylesheet" href="./styles/main.scss">

Используйте : <link rel="stylesheet" href="./styles/main.css">

Надеюсь, вы поняли.

Ответ №2:

Ваша главная ошибка в том, что вы «связали файл .scss», браузер не может прочитать файл .scss, он всегда читает файл .css. поэтому вы должны связать файл .css в своем HTML-файле.

затем начните просмотр вашего файла .scss для компиляции. введите описание изображения здесь

выполнив этот шаг, вы проверите свой браузер. Я надеюсь, что вы получите ожидаемый результат. Спасибо.

Ответ №3:

вы не можете использовать sass в html-файле напрямую, потому что он не работает. Но как вы можете использовать файл sass в html??

Файлы SCSS — это файлы, которые необходимо преобразовать в файлы CSS (чтобы браузер знал, как их использовать). Вы можете видеть SCSS как любой другой язык высокого уровня, такой как C #; вы компилируете / встраиваете его в целевой язык (в данном случае в браузер).

Ответ заключается в том, что вы должны преобразовать свой файл sass в файл css. Вы можете сделать это с помощью cmd. Сначала откройте cmd и перейдите в папку проекта, затем введите эту команду в cmd:

 sass scssyour_scss_filename cssyour_css_filename

После выполнения этой команды вы можете увидеть ее выходные данные в папке.
Удачи.