So importieren Sie SCSS-Dateien in HTML-Dateien

Question 1

Ich erstelle ein einfaches Website-Projekt mit einfachem HTML und SCSS.

Die HTML-Datei sieht so aus:

<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="http://stackoverflow.com/../node_modules/bulma/bulma.sass">
    <link rel="stylesheet" href="http://stackoverflow.com/../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>

und ich möchte jetzt eine SCSS-Datei in diese HTML-Datei importieren, aber es hat nicht funktioniert.

Hat jemand ein paar Lösungen?

Question 2

Wenn Sie VSCode verwenden, können Sie “Live SASS Compiler” installieren.

Dann kannst du eine .scss-Datei erstellen und unten rechts auf „Sass ansehen“ klicken

Und es wird Ihre .scss-Datei in eine .css-Datei kompilieren, die Sie in Ihr HTML-Dokument importieren können.

Question 3

In codepen.io können Sie auch live mit SCCS-Code arbeiten. So geht’s: Klicken Sie im CSS-Fenster Pain auf das kleine Einstellungssymbol oben rechts im Bereich. Wählen Sie dann aus der Dropdown-Liste für CSS-Präprozessor SCCS aus.

Ich erstelle damit 3D-Text und es hat super funktioniert. Jetzt muss ich diesen SCCS-Code kompilieren, um ihn in CSS umzuwandeln. Ich werde es hier posten, nachdem ich herausgefunden habe, wie ich dir zeigen kann, wie cool es ist oder wie schlecht die Dinge gelaufen sind.

Ich arbeite zum ersten Mal mit SCCS.

Question 4

Sie können nur CSS-Dateien “importieren”. SCSS und Co sind Präprozessoren, die ihre benutzerdefinierte Syntax nehmen und sie in CSS umwandeln. Sie müssen also Ihr SCSS in CSS konvertieren und dann <link> es in Ihrem HTML wie normales CSS (bc. das ist es.)

Question 5

Sie können die SCSS-Datei nicht direkt in HTML importieren, da HTML nur die CSS-Datei liest und Sie die Sass-Datei per Gulp oder Webpack in CSS vervollständigen müssen

Question 6

Sie können eine SASS/SCSS-Datei nicht in ein HTML-Dokument „importieren“. SASS/SCSS ist ein CSS-Präprozessor, der auf dem Server läuft und zu CSS-Code kompiliert, den Ihr Browser versteht.

Bitte verwenden Sie diesen Link, um die sass/scss-Datei zu kompilieren.
https://thecoderain.blogspot.com/2019/12/run-and-compile-sass-scss-file-to-css.html

Question 7

Sie importieren eine SASS/SCSS-Datei nicht direkt in eine HTML-Datei. Ihr SCSS wird in eine .css-Datei kompiliert, und Sie fügen stattdessen diese CSS-Datei ein.

Ich würde empfehlen, einige Tutorials zu SCSS nachzuschlagen.

Question 8

Browser verstehen die SCSS-Dateien nicht automatisch, Sie müssen solche Dateien zuerst in CSS kompilieren. Wenn du eine … bist Node.js Benutzer können Sie den SASS-Compiler installieren, indem Sie den folgenden Befehl ausführen:

npm install -g sass

Kompilieren Sie dann Ihre SCSS-Datei, indem Sie den folgenden Befehl ausführen:

sass input.scss output.css

Jetzt können Sie verlinken output.css in Ihrer HTML-Datei.