SASS is not working in Visual Studio Code 1.33.0
Question
Started using visual studio code for SASS. Created the simple HTML as below.
<!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>
Added a folder named "styles" where I have created "main.scss" file as below and used "Live Sass Compiler" extension to generate the CSS file and map file.
SCSS File:
$primaryHeaderBack : lightblue;
header {
background: $primaryHeaderBack;
}
Expected Output:
Header Background color is not showing light blue but white. In order to see the desired output what should I do? Please help me.
3 answers
solution1
4 ACCPTED 2019-04-10 13:39:47
@Moibabrata ,@coops asked you to link your CSS file to your HTML because, Once the live SASS compiler starts the SASS files gets converted to CSS files, As HTML file cannot understand .sass , You have to use .css , But don't worry, Your .css file will have everything you type inside your .sass file.
You don't have to ever modify your .css file, Whatever you do in the .sass file will get Updated Automatically in the .css file.
So Instead of this : <link rel="stylesheet" href="./styles/main.scss">
Use : <link rel="stylesheet" href="./styles/main.css">
Hope you understood.
solution2
1 2020-07-01 07:29:49
Your main mistake is you " linked .scss file" the browser can't read .scss file it always read .css file. so you must link .css file in your HTML file.
then start watching on your .scss file for compiling. enter image description here
completing these step you will check your browser. I hope you will get the expected result. Thank you.
solution3
0 2019-04-10 13:11:10
you cant use sass into html file directly, because it not works. But how you can use a sass file into html??
SCSS files are files which need to be converted to CSS files (so a browser knows how to use them). You can see SCSS as any other high-level language like C#; you compile / build it into a language for the target (in this case the browser).
The answer is you must to convert your sass file into a css file. You can do this by cmd. First, open cmd and get in project folder, then write this command in cmd:
sass scss\your_scss_filename css\your_css_filename
After you run this command, you can see its output in the folder. Good luck.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.