Unable to import SASS in a non-webpack project

[cdimitroulas]

Your issue may already be reported! Please search on the issue track before creating one.

• [ ] Is this something you can debug and fix? Send a pull request! Bug fixes and documentation fixes are welcome.
• [x] Are you running the latest version?
• [x] Are you reporting to the correct repository?

Bug Report

Environment

• Extension version(s): 6.1.18
• Bulma version: 0.9.4
• OS: OSX 12.5.1
• Browser: Chrome, Safari
• How you are customizing the extension: no

Current Behavior Importing the SCSS styles in my Rails project which does not use webpack (uses sass npm plugin) fails with an error due to the use of the ~ in imports.

My import code (bulma SCSS is imported before this line):

@import "bulma-calendar/src/sass";

The error:

Error: Can't find stylesheet to import.
  ╷
1 │ @import "~bulma/sass/utilities/functions.sass"
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  bulma-calendar/src/index.sass 1:9            @import
  app/assets/stylesheets/application.scss 4:9  root stylesheet

Input Code

• Initialization code:

@import "bulma-calendar/src/sass";

Possible Solution Don't use deprecated tilde import syntax (note that this syntax is already deprecated in webpack)

Additional context/Screenshots N/A

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codepen or similar. I think it should be easily reproducible by creating a simple SCSS file which imports bulma + bulma-calendar SCSS and then try to compile it using the scss npm module with a command like:

sass ./application.scss:./application.css --load-path=node_modules

[KipK]

same problem with Svelte/Vite here

[knoxjeffrey]

If using Vite you can handle this in the meantime with

resolve: {
  alias: {
    "~bulma": "bulma",
  },
}

[Sol-Cryss]

I had the same issue. I'm making a non-webpack WordPress theme using node-sass as a compiler to string some commands together (copying files after compiling, etc). In Visual Studio Code, there's an extension for Live SASS watching/compiling. I found out it uses a form of webpack so it works whenever I save and it auto-compiles... But if I build using node-sass to compile the CSS, it would give the same error as OP.

I found a solution, it's fairly simple: https://stackoverflow.com/questions/37106230/node-sass-does-not-understand-tilde#answer-57756936

Basically, install another node library, that will handle as node-sass' importer. npm install node-sass-tilde-importer --save-dev

Then set up the package.json script, or use the command line: node-sass --watch in_style.scss --importer=node_modules/node-sass-tilde-importer out_style.css

It's definitely a band-aid...

[michael-hack]

Should be fixed with pull request #316. Please reopen if not.