Attaching a SCSS to HTML Docs

Attaching a SCSS to HTML docs

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.

There are client-side alternatives to SASS that can be compiled in the browser using javascript such as LESS CSS, though I advise you compile to CSS for production use.

It's as simple as adding 2 lines of code to your HTML file.

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

Importing SCSS file from index.html doesn't work

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>

sass bootstrap4 is not getting applied to my html file

app.scss

$primary: #3498db;
 $secondary: #e67e22;
$success: #2eeeff;
$danger: #e74c3c;

@import "../node_modules/bootstrap/scss/bootstrap.scss";

 /*# sourceMappingURL=styles.css.map */

html

 <link href="scss/app.css" rel="stylesheet" />

How to add SCSS styles to a React project?

The way to use scss depends a bit on your React development environment. For beginners React recommends using Create React App which is, according to them, "a comfortable environment for learning React, and is the best way to start building a new single-page application in React." You can read more about it at https://reactjs.org/docs/create-a-new-react-app.html. To create your app you simply type the following at the command line:

npx create-react-app my-app

After that, React sets up a full development environment with css files you can edit to style your code.

If you want to continue using create-react-app (sometimes called CRA) and use scss then you can install the Dart Sass library by typing:

npm i sass --save-dev

(Keep in mind that node-sass in deprecated and we are using Dart Sass instead of it)

For a full explanation about how to use node-sass and CRA together see "How to Use SASS in Create React App?": https://www.robinwieruch.de/create-react-app-with-sass-support

Once you move beyond CRA you can tinker with your own webpack.config.js which can also be set up to compile and import SCSS files. But if you are just starting out with React then you may want to leave tinkering with your webpack.config.js for later and stick with CRA.

Linking CSS File on a HTML Document In Same Directory On my Hard Disk (Windows)

While the accepted answer is not wrong it's over-complicate things.

If your file is https://www.google.com/b/bananacream/bananas/index.html

<link rel="stylesheet" href="/style.css">

Will try to get https://www.google.com/style.css

<link rel="stylesheet" href="style.css">

Will try to get https://www.google.com/b/bananacream/bananas/style.css as nothing indicate what folder the file is located in it will use the same folder as the requesting file.

<link rel="stylesheet" href="./style.css">

Will try to get https://www.google.com/b/bananacream/bananas/style.css as ./ tell that the file is located in the same folder as the requesting file.

<link rel="stylesheet" href="../style.css">

Will try to get https://www.google.com/b/bananacream/style.css as ../ tell that the file is located in the previous folder as the requesting file.

<link rel="stylesheet" href="../../style.css">

Will try to get https://www.google.com/b/style.css as ../../ tell that the file is located in the folder two steps before as the requesting file.

Is it possible to import fonts from the directory with scss?

As far as I know you can't import fonts using @import in SCSS. You can include fonts using @font-face. For example:

@font-face {
    font-family: 'Open Sans';
    src: url(path/to/file) format(Example: 'truetype' or 'opentype' depending on the file extension of your font);
}


// USAGE
body {
    font-family: 'Open Sans', sans-serif;
}

Import regular CSS file in SCSS file?

Looks like this is unimplemented, as of the time of this writing:

https://github.com/sass/sass/issues/193

For libsass (C/C++ implementation), import works for *.css the same way as for *.scss files - just omit the extension:

@import "path/to/file";

This will import path/to/file.css.

See this answer for further details.

See this answer for Ruby implementation (sass gem)

---

Related Topics