How to import SCSS files into HTML files

Question

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?

Does this answer your question? [Attaching a Sass/SCSS to HTML docs](https://stackoverflow.com/questions/19215517/attaching-a-sass-scss-to-html-docs) — juzraai, Aug 28 '20 at 14:35

score 15 · Answer 1 · answered Sep 10 '20 at 10:42

15

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.

answered Sep 10 '20 at 10:42

Dacomis

358
5
13

score 5 · Answer 2 · edited Feb 01 '21 at 02:11

5

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.

edited Feb 01 '21 at 02:11

Mahyar Mottaghi Zadeh

1,178
6
18
31

answered Jan 31 '21 at 19:07

Double G

76
2
3

score 1 · Answer 3 · answered Aug 24 '21 at 18:35

1

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.

answered Aug 24 '21 at 18:35

Leontine

9
1

1

Browsers don't know SCSS, it is a different language closely resembling CSS and it has to be compiled to CSS. – CoredusK Aug 27 '21 at 13:55

score 1 · Answer 4 · edited Mar 05 '22 at 08:19

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

score 1 · Answer 5 · answered Oct 25 '22 at 16:23

1

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>

answered Oct 25 '22 at 16:23

Amanda

48
4

1

Your answer to the question "how do I import **SCSS** files into my HTML page" is "Don't use SCSS, use Less"..? – Victor Zamanian May 02 '23 at 12:44

score 0 · Answer 6 · answered Mar 09 '20 at 14:02

0

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.)

answered Mar 09 '20 at 14:02

Code Spirit

3,992
4
23
34

score 0 · Answer 7 · edited Aug 28 '20 at 14:33

0

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.

edited Aug 28 '20 at 14:33

juzraai

5,693
8
33
47

answered Mar 09 '20 at 14:02

Chris L

129
5

score 0 · Answer 8 · answered Mar 09 '20 at 14:03

0

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

answered Mar 09 '20 at 14:03

Vahid Alvandi

588
9
17

score 0 · Answer 9 · answered Mar 09 '20 at 14:25

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

score 0 · Answer 10 · answered May 02 '21 at 13:19

0

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">

answered May 02 '21 at 13:19

upog

4,965
8
42
81

How to import SCSS files into HTML files

10 Answers10

Linked

Related