6

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

MD. Khairul Basar
  • 4,976
  • 14
  • 41
  • 59
Omar
  • 2,726
  • 2
  • 32
  • 65
  • whats a `.sass` file? SASS _(Syntactically Awesome Style Sheets)_ the css precompiler uses `.scss` files _(SASS Casscading StyleSheet)_ – zgood Jul 10 '18 at 20:05
  • 5
    `.sass` is a thing. I promise – Omar Jul 10 '18 at 20:07
  • I didn't ask if it was a thing, I asked what it was. Do you have a reference link? – zgood Jul 10 '18 at 20:08
  • idk... https://en.wikipedia.org/wiki/Sass_(stylesheet_language) – Omar Jul 10 '18 at 20:09
  • .sass files? Isn't .scss ? – enbermudas Jul 10 '18 at 20:23
  • what r u saying – Omar Jul 10 '18 at 20:26
  • 1
    @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. – The Dead Man Jul 10 '18 at 20:38
  • @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 – The Dead Man Jul 10 '18 at 20:39
  • i get the syntactical differences. Just wondering if they work together with @import – Omar Jul 10 '18 at 20:55
  • @Omar 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 – Brad Jul 12 '18 at 12:29
  • @Brad it does care though (in my angular CLI project). `@import` is only looking for .scss. – Omar Jul 12 '18 at 20:23
  • Angular shouldnt care either. Whatever you are using as a compiler should be the only entity that should care – Brad Jul 12 '18 at 20:36

3 Answers3

7

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.

hcs
  • 321
  • 3
  • 14
  • I tried `@import 'packages/bulma'` and get `'client/packages/bulma.scss doesn\'t exist!',` but i think its a setting? – Omar Jul 10 '18 at 20:46
  • 1
    Are you using webpack? if so, [this](http://github.com/webpack-contrib/sass-loader) 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](http://github.com/sass/node-sass) – hcs Jul 10 '18 at 21:40
0

@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

nschonni
  • 4,069
  • 1
  • 28
  • 37
0

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

SwissCodeMen
  • 4,222
  • 8
  • 24
  • 34
Alweena Iqbal
  • 1