rails / webpacker

Use Webpack to manage app-like JavaScript modules in Rails
MIT License
5.31k stars 1.47k forks source link

Issue with directory structure #2451

Closed stochastic-thread closed 4 years ago

stochastic-thread commented 4 years ago

I want to be able to leverage webpack(er) in my Rails 6 projects. One thing I find really annoying however, is that in many tutorials and explanations on how to effectively import libraries like bootstrap, etc., one step is to create a /stylesheets or /css subdir under /javascripts under /app. I think this is ugly and does not lend itself to a project that is built for the longer term. Can someone here help me understand what is needed to be able to keep my stylesheets under assets/stylesheets since that seems more sane than putting stylesheets under the javascripts folder?

I'm sorry if this is "not relevant" for this project, but for future posterity I think this would be useful since similar comments have been posted on basically every Rails 6 webpacker tutorial that I've found so far.

Thanks, appreciate your time.

jakeNiemiec commented 4 years ago

You can find other explanations on here, but the short answer is this:

Instead of compass or ruby compiling your sass, you now have nodejs compiling it. This allows you to compile styles, streaming them into the browser without reloading. My favorite part is that each style can be traced back to the exact line in the sass file (all within the browser):

image

Can someone here help me understand what is needed to be able to keep my stylesheets under assets/stylesheets since that seems more sane than putting stylesheets under the javascripts folder?

How do you include your styles currently? You can aways relatively include styles from your JS like:

// app/javascript/packs/application.js
import './../../assets/stylesheets/myStyle.scss'
jakeNiemiec commented 4 years ago

Related: https://github.com/rails/webpacker/pull/1833