How to import SCSS files into HTML files - html

I create a simple website project with simple HTML and SCSS.
the HTML file seems like this:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="../../node_modules/bulma/bulma.sass">
<link rel="stylesheet" href="../../node_modules/bulma/css/bulma.css">
<link rel="stylesheet/scss" type="text/css" href="./header.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<div class="header">
<div class="columns header-contents">
<div class="column is-four-fifths">
<div class="header-logo">
hier ist logo
</div>
<div class="header-title"> Title</div>
<div class="title-content">content</div>
</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
</div>
</body>
</html>
and I want to now import SCSS file into this HTML file, but it was not working.
Does anybody some solutions?

If you use VSCode you can install "Live SASS Compiler"
Then you can create a .scss file and click on "Watch Sass" on bottom-right
And it's going to compile your .scss file into a .css file that you can import into your HTML document.

Browsers do not automatically understand the SCSS files, you need to compile such files first into CSS. If you are a Node.js user, you may install the SASS compiler by running the command:
npm install -g sass
Then compile your SCSS file by running the command:
sass input.scss output.css
Now you can link output.css in your HTML file.

In codepen.io you can also work live with SCCS code. This is how:
In the CSS window pain, click on the little Settings icon on top right of the pane.
Then from the drop list for CSS Preprocessor choose SCCS.
I'm creating 3D text with it and it worked great. Now I have to compile that SCCS code to turn it into CSS. I will post it here after I figure out how to show you how cool it is or how badly things went.
This is my first time working with SCCS.

You can only "import" css files. SCSS and co are preprocessors which take their custom syntax and transform it into CSS. So you have to convert your SCSS into CSS and then <link> it in your HTML like regular CSS (bc. thats what it is.)

you can't import directly scss file in html , because html just read css file and you need to comple sass file to css by gulp or webpack

You can not "import" a SASS/SCSS file to an HTML document.
SASS/SCSS is a CSS preprocessor that runs on the server and compiles to CSS code that your browser understands.
Please use this link for compile sass/scss file.
https://thecoderain.blogspot.com/2019/12/run-and-compile-sass-scss-file-to-css.html

You don't import a SASS/SCSS file directly into an HTML file. Your SCSS will be compiled into a .css file, and you include that css file instead.
I would recommend looking up some tutorials on SCSS.

In Visual studio code, you can compile scss live. below are the steps
one time
npm i -g sass
To compile
sass --watch scss/index.scss css/index.css
In HTML
<link rel="stylesheet" href="css/index.css">

You don't import a SASS/SCSS file directly into an HTML file. Follow below steps
Type in terminal (if you have package.json in your project, you don't need this step) > npm init
Type in terminal> npm i sass --save
Add to package.json: "scripts": {"sass": "sass --watch sass/style.scss:css/style.css",},
Add 2 folders (sass & css) and add a file in sass (style.scss)
Type in terminal > npm run sass

Try using less:
<link rel="stylesheet/less" type="text/css" href="x.scss" />
<script src="https://cdn.jsdelivr.net/npm/less#4.1.1"></script>

Related

Tailwind CSS is not kicking in my project, I tried to learn this new CSS framework I installed everything as instructed in the docs but Its not worked

enter code here//I installed and setup the things as instructed in tailwind docs but when I apply tailwind utility classes on my HTML file it is not working could anyone please help
// this is my src/style.css
#tailwind base;
#tailwind components;
#tailwind utilities;
//I build the script by the command npm run build-css it generated pre build CSS in public folder. there I created HTML file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<h1 class="text-orange-700">Hello Jaydeep</h1>
</div>
</body>
</html>
'''
// when I apply tailwind classes in it doesn't work, One more thing I want to mention is that when I included CSS file in HTML then the Fonts and size got changed, but when I applied utility classes style It's not working
if you have followed everything according to the docs, one thing you can do is set your style.css as input file and create an another css file as your output file and use that file in your .html, to do this, you can run the following command
npx tailwindcss -i src/styles.css --output src/styles/tailwind.css --watch
here it will create a output file named tailwind.css in the above mentioned directory and you can now inclued src/styles/tailwind.css in your .html file.
Okay, since lots of information is missing, I'll try to help with some standard steps.
If you're using react-native-rn, and can't get to generate tailwind.json, look here
First, check out your package.json or the command you're running.
The command should look like this
tailwind --input path/to/your/css/file.css --output path/to/file/tailwind/will /generte.css
Basically same answer as Satishkumar sahu, just explained in a different way.

How to add 'bulma-helpers' to my HTML without npm(and yarn)

I want to add 'bulma-helpers' to my HTML without npm and yarn, so I downloaded files(css/bulma-helpers.css, bulma-helpers.css.map, bulma-helpers.min.css) and put in my css folder.
and I used link tag.
<link rel="stylesheet" href="css/bulma-helpers.min.css">
but, I couldn't use any class in bulma-helpers.
How to add it without npm, and yarn?
(Link: https://github.com/jmaczan/bulma-helpers)
Maybe this works:
download the bulma css file from here.
then put it in css folder.
add this to your header:
<link rel="stylesheet" href="./css/bulma-helpers.min.css">

linking a css file to my html file

I am having way too much trouble figuring out how to link a .css file to my .html file. They are both in the same folder on my desktop.
I created the these in sublime and when I made the styles.css I did saveas selected the folder on my desktop that my html was in and then saved it as a css file. Something that might be the problem is when I look at the files in the folder, the html say filename.html but the css just says style without the .css and the file type is file. I tried to go into the properties and change it to .css but that also didn't work.
This is the html file
I have tried "/style.css" , "foldername/style.css" , and the entire path
<html>
<link href="style.css" rel="stylesheet" type="text/css"/>
<body>
<div class ="test">
test
</div>
</body>
</html>
This is the css file with the file name of style.css
.test{color:green; margin:50px;}
Did you name your CSS file "styles.css" or "style.css?"
When working locally, make your css paths relative. So it would look something like this:
<link rel="stylesheet" href="../styles.css">

Less not compiling to CSS

I am using less.js to compile less on the fly. Here's a sample of my markup:
<html>
<head>
<link rel="stylesheet/less" href="sample.less" type="text/css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>
</head>
<body>
<div class="box">
abcd
</div>
</body>
</html>
It is not compiling less into CSS:
In order to compile LESS to CSS, you should use lessc command in terminal if you're not using any task managers.
Navigate to your directory on terminal and type this command.
$ lessc path/styles.less > path/styles.css
Once this is run, refresh your browser. LESS should be converted to CSS.
Please follow http://lesscss.org/ under using "Using LESS"
There are two ways to fix this
1] Use Firefox instead of chrome as this is a known issue for chrome.
2]Run your files on any server like Apache,IIS.

Can't add CSS on ERB file, Sinatra

I'm trying to add Twitter Bootstrap CSS to an ERB file and run with Sinatra, but CSS don't show up.
My code:
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css">
my folder structure is the same in the code.
I've already tried href="lib/... and href="../lib/... and don't work
Any solution?
You should copy bootstrap.min.css in your Sinatra public directory. Then use:
<link rel="stylesheet" href="/bootstrap.min.css">
to include it in your page.