CODEWITHSUNDEEP
vue.jssassstylesheet
drake035
drake035

Reputation: 2897

Importing SCSS file from index.html doesn't work

I'm trying to import a SCSS file within the head tags in my root index.html file, but it doesn't load. Instead, in Network Chrome Dev Tools tab I see my SCSS file marked in red with a status of (canceled).

Any idea why? Here's how I import my SCSS file in index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <style>
      @import 'styles/main.scss';
    </style>
  </head>

Upvotes: 0

Views: 10146

Answers (3)

Raihan Biswas
Raihan Biswas

Reputation: 1

You can not "attach" 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. If you Attach your sass into your HTML file then your Browser can't understand it. so don't try to use it.

Upvotes: 0

Brad
Brad

Reputation: 1691

If you are using straight HTML, you must convert your scss into CSS with a compiler first. Your browser doesnt read scss as CSS. Compiling is easy, you can use the command line, software like Koala or prepros. If you are using Vue, do what Hank said in his response

Upvotes: 2

Hank X
Hank X

Reputation: 2044

you can not import scss file directly into a html file.

if you are using vue.

in the vue component.

code like this:

<style scoped lang="scss">
@import 'styles/main.scss';
</style>

Upvotes: 3

Related Questions