How to import SCSS files into HTML files

M

10

6

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/[email protected]/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?

Maharaja answered 9/3, 2020 at 14:0 Comment(1)

Does this answer your question? Attaching a Sass/SCSS to HTML docs – Inboard 28/8, 2020 at 14:35

W

16

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.

Wildman answered 10/9, 2020 at 10:42 Comment(0)

B

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.

Busyness answered 31/1, 2021 at 19:7 Comment(0)

R

2

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

Radiometeorograph answered 5/3, 2022 at 5:18 Comment(0)

C

2

Try using less:

<link rel="stylesheet/less" type="text/css" href="x.scss" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Clockmaker answered 25/10, 2022 at 16:23 Comment(1)

Your answer to the question "how do I import SCSS files into my HTML page" is "Don't use SCSS, use Less"..? – Outgoings 2/5, 2023 at 12:44

F

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.

Freestyle answered 24/8, 2021 at 18:35 Comment(1)

Browsers don't know SCSS, it is a different language closely resembling CSS and it has to be compiled to CSS. – Boiney 27/8, 2021 at 13:55

K

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

Kynthia answered 9/3, 2020 at 14:2 Comment(0)

G

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.

Gilolo answered 9/3, 2020 at 14:2 Comment(0)

E

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

Epithelioma answered 9/3, 2020 at 14:3 Comment(0)

T

0

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

Thorncombe answered 9/3, 2020 at 14:25 Comment(0)

U

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

Urrutia answered 2/5, 2021 at 13:19 Comment(0)

Recommended topics

Hot tags