possible to import SASS file in SCSS?

Question

styles.scss

@import 'packages/bulma.sass';

bulma.sass

@charset "utf-8"
/*! bulma.io v0.6.1 | MIT License | github.com/jgthms/bulma */
@import "sass/utilities/_all"
@import "sass/base/_all"
@import "sass/elements/_all"
@import "sass/components/_all"
@import "sass/grid/_all"
@import "sass/layout/_all"

terminal

'Error: client/packages/bulma.sass.scss doesn\'t exist!

Is it possible to import SASS into a SCSS file? What is the best way to install bulma into a scss env.

I also tried @import 'packages/bulma' and get client/packages/bulma.scss doesn\'t exist!.

Anticipate

whats a .sass file? SASS (Syntactically Awesome Style Sheets) the css precompiler uses .scss files (SASS Casscading StyleSheet) – Howling

.sass is a thing. I promise – Anticipate

I didn't ask if it was a thing, I asked what it was. Do you have a reference link? – Howling

idk... en.wikipedia.org/wiki/Sass_(stylesheet_language) – Anticipate

.sass files? Isn't .scss ? – Supervene

what r u saying – Anticipate

@EnriqueBermúdez SCSS refers to the main syntax supported by the Sass CSS pre-processor. Files ending with .scss represent the standard syntax supported by Sass. SCSS is a superset of CSS. Files ending with .sass represent the "older" syntax supported by Sass originating in the ruby world. – Crain

@EnriqueBermúdez The basic difference is the syntax. While SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS. hope u get it – Crain

i get the syntactical differences. Just wondering if they work together with @import – Anticipate

@Anticipate a compiler doesnt care of they are sass or scss. You just dont include the extension when importing. When using "@import 'packages/bulma.sass';" leave off the sass. Sass and scss files are completely compatible when compiling – Tocopherol

@Tocopherol it does care though (in my angular CLI project). @import is only looking for .scss. – Anticipate

Angular shouldnt care either. Whatever you are using as a compiler should be the only entity that should care – Tocopherol

Answer 1

tl;dr can you try removing the .sass extension?

@import 'packages/bulma';

More detailed answer from this post:

The Sass @import directive extends the CSS @import rule so that it works with .scss and .sass files. It imports the file referenced and any variables or mixins that are defined in the imported file so they can be used in the main file.

@import "typography.scss";

Assuming there’s a file typography.scss in the current directory, the contents of typography.scss will replace the @import statement.

Sass makes it even simpler. If you forget to include the extension, it will look for a file with the same name and either a .scss or .sass extension.

@import "typography";

The statement above would find either typography.scss or typography.sass in the same directory as the file importing the typography styles.

Proudman

I tried @import 'packages/bulma' and get 'client/packages/bulma.scss doesn\'t exist!', but i think its a setting? – Anticipate

Are you using webpack? if so, this may help. If you're just using Node, I think you'll have to use the node-sass package -- its documentation can be found here – Proudman

Answer 2

@Hector is right, just wanted to add some other things.

1. What is valid is covered by the language docs https://sass-lang.com/documentation/file.SASS_REFERENCE.html#import so the double import might be a node-sass bug, but the extension behaviour is going to warn in the next version of Sass AFAIK. Libsass runs through a sass2scss library to transpile the "unsupported" old .sass to .scss.

2. Remove the leading _ from the imports, those aren't valid

Organize

Answer 3

use @import "../node_modules/bulma/bulma.sass"; instead of @import 'packages/bulma.sass';

It will not throw any error. For more information, you can go through this link

Lecky