How do I import a Sass library from within a "node_module" (Rails 5.1)?

Pretty much the question above!

I have a Rails 5.1 app with webpacker installed, and I used npm to install a front end framework:

npm install bulma --save

Now that it is inside of node_modules I want to import it into a bulma.scss file in the asset pipeline:

@import "/node_modules/bulma/sass/utilities/initial-variables" does not seem to cut it.

Any ideas?

OH MAN! So I had to add the ../../../ before the node_modules in the path. Got that sorted!

Either way, other than that, am I missing anything? Is there a better way to do this?

I've avoided NPM for a while and now I am trying to accept it as the future...

You can actually use yarn now to add packages which is a little better than using npm now. yarn add bulma will do the same thing as above and it makes things easier.

One thing I will say is I think that you shouldn't have to specify the node_modules folder at all. That should be available in the path I would assume. You should be able to do something like this instead: @import "bulma/sass/utilities/initial-variables"

File to import not found or unreadable: bulma/sass/utilities/initial-variables.
Load paths:
  /Users/pbmarcano/Developer/TurtleDo/app/assets/config
  /Users/pbmarcano/Developer/TurtleDo/app/assets/images
  /Users/pbmarcano/Developer/TurtleDo/app/assets/javascripts
  /Users/pbmarcano/Developer/TurtleDo/app/assets/stylesheets
  /Users/pbmarcano/Developer/TurtleDo/vendor/assets/javascripts
  /Users/pbmarcano/Developer/TurtleDo/vendor/assets/stylesheets
  /Users/pbmarcano/.rvm/gems/ruby-2.4.0/gems/trix-0.10.1/vendor/assets/javascripts
  /Users/pbmarcano/.rvm/gems/ruby-2.4.0/gems/trix-0.10.1/vendor/assets/stylesheets
  /Users/pbmarcano/.rvm/gems/ruby-2.4.0/gems/coffee-rails-4.2.1/lib/assets/javascripts
  /Users/pbmarcano/.rvm/gems/ruby-2.4.0/gems/actioncable-5.1.0/lib/assets/compiled
  /Users/pbmarcano/.rvm/gems/ruby-2.4.0/gems/actionview-5.1.0/lib/assets/compiled
  /Users/pbmarcano/.rvm/gems/ruby-2.4.0/gems/turbolinks-source-5.0.1/lib/assets/javascripts

Looks like leaving out node_modules doesn't quite work either.

Thanks for the tip on yarn!

Yeah, I figured it wouldn't work automatically like that. I'm not used to using webpack with SCSS, so it's new to me.

From a random Github issue, it looks like maybe adding a tilde at the beginning would work? @import "~bulma/bulma/utilities/utilities";

Yeah that doesn't seem to do it either. I think I have more learning to do with webpack & loaders.

For now, as long as the crazy long path works works in heroku, I am going to just run with it.

Thanks!

Yeah I was gonna say, no sense in fiddling with this if what you got works. :P

I'll have to check out loading CSS with webpack sometime soon and see how that all works. This stuff is an absolute mess. I hope that it gets more sane in the next few months.

Learning more rails 5.1 specific stuff!

Apparently @import "bulma/bulma/utilities/utilities"; works a lot better if you add:

Rails.application.config.assets.paths << Rails.root.join('node_modules')
to
config/initializers/assets.rb!

Maybe it's included there by default on new projects but I upgraded and forgot that important step!

You know, I just realized that you're attempting to load npm packages in Webpack but then access them from the asset pipeline. This is why you're having issues with it.

These are totally separate pipelines. You can actually write your own stylesheets entirely in Webpack and include them without using the asset pipeline. There's a separate tag for accessing stylesheets in Webpack <%= stylesheet_pack_tag 'hello_react' %> that never touches the asset pipeline.

You'll have a lot better time if you include your assets this way if you want them to load node packages like that.

Yes sir, you are absolutely right.

Once I realized that stylesheet_pack_tag was a thing I realized I was doing it all wrong fundementally.

Thanks, we're cooking now!

{
            loader: 'sass-loader',
            options: {
              "includePaths": [
                path.resolve(__dirname, 'node_modules'),
                path.resolve(__dirname, 'src')
              ]
            }
          }

const path = require('path')

const CWD = process.cwd()

module.exports = {
  "includePaths": [
    path.resolve(CWD, 'node_modules'),
    path.resolve(CWD, 'src')
  ]
}