//= require stylesheet with webpacker

rubyonrails-talk
1

I have my stylesheet in app/javascript/stylesheets and need to include actiontext.scss in application.scss where both files are located in app/javascript/stylesheets but using

//= require actiontext has no effect, styling is still not being applied

2

“//= require …” is Sprocket’s syntax (most known as rails’ assets pipeline), not webpacker’s. If you really want to handle CSS assets with webpacker you should start by reading this https://github.com/rails/webpacker/blob/master/docs/css.md

3

Nothing in there about loaders I’m trying to get actiontext.scss to load I have listed in app/javascripts/packs/application.js

import “…/stylesheets/actiontext.scss”

but the styling’s not being applied

4

Fugee-

when you switch from css to scss, you need to rename application.css to application.scss and do the following:

stop using //= require

instead use @import always and from now on when using scss. Do not use //= require syntax anymore

this is explained in the “IMPORTANT NOTE” at the top of the sass-rails docs:

https://github.com/rails/sass-rails#important-note

if you are trying to install Bootstrap, there are some bad tutorials on the internet. I think one of them tells you to put the bootstrap.scss into your application.js file. Don’t do that.

instead backtrack on what you did and use webpack to install Bootstrap (this is NOT the same as the ‘old way’ which you could still do on a Rails 6 app), simple instructions here : https://gorails.com/forum/install-bootstrap-with-webpack-with-rails-6-beta

-jason