[Rails] I want to load CSS with webpacker

If you use rails ver.6 or higher, I wanted to read CSS with webpacker instead of ʻasset pipeline`, so I implemented it, so it's a memo.

Directory structure

From README.md of webpacker.

app/javascript:
  └── packs:
      # only webpack entry files here
      └── application.js
      └── application.css

procedure

It is assumed that rails new is completed. If you are using a version lower than rails6, install webpacker as well.

Create new folder / file

Follow the directory structure of ↑. Create ʻapplication.css` file in app / javascript / packs

Entry point

The entry point is packs / application.js, so import the application.css file.

packs/application.js


import "packs/application.css";

Edit application.html.erb

Describe the following in views / layouts / application.html.erb. Probably the default is stylesheets_link_tag, so I wondered if I should change it to stylesheets_pack_tag.

<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>

Write CSS

All you have to do is write CSS. Next, I would like to introduce React and Vue.js.

This time, I just wrote down the procedure, so if you want to know the contents in a little more detail, ↓ will be helpful.

reference

Rails 6+ Webpacker development environment was set up by a JS strong man (translation) I want to see css and images with webpacker Separate styles for each page with webpacker

Recommended Posts

[Rails] I want to load CSS with webpacker
I want to play with Firestore from Rails
I want to authenticate users to Rails with Devise + OmniAuth
I want to push an app made with Rails 6 to GitHub
I want to use DBViewer with Eclipse 2018-12! !!
I want to convert an array to Active Record Relation with Rails
I want to add a browsing function with ruby on rails
[Rails] I want to add data to Params when transitioning with link_to
I want to test Action Cable with RSpec test
I want to use java8 forEach with index
I want to introduce the committee with Rails without getting too dirty
I want to perform aggregation processing with spring-batch
I want to be able to read a file using refile with administrate [rails6]
Rails6 I want to make an array of values with a check box
[Rails] I want to test with RSpec. We support your step [Introduction procedure]
I want to use a little icon in Rails
I want to dark mode with the SWT app
I want to monitor a specific file with WatchService
I want to transition screens with kotlin and java!
Addicted to the webpacker that comes standard with Rails 6
I want to get along with Map [Java beginner]
I want to redirect sound from Ubuntu with xrdp
I want to convert characters ...
I want to hit the API with Rails on multiple docker-composes set up locally
[Rails] [bootstrap] I want to change the font size responsively
[Rails] I tried to create a mini app with FullCalendar
I was addicted to setting default_url_options with Rails devise introduction
I want to make a list with kotlin and java!
I want to make a function with kotlin and java!
I want to create a form to select the [Rails] category
[Rails] I want to display "XX minutes ago" using created_at!
[Rails] I tried to implement batch processing with Rake task
Even in Java, I want to output true with a == 1 && a == 2 && a == 3
I want to manually send an authorization email with Devise
I want to distinct the duplicated data with has_many through
I want to pass the startup command to postgres with docker-compose.
[Java] I want to test standard input & standard output with JUnit
Swift: I want to chain arrays
I want to use FormObject well
I want to convert InputStream to String
I tried to interact with Java
I want to docker-compose up Next.js!
Connect to Rails server with iPhone
How to get along with Rails
Introducing React to Rails with react-rails
I want to make a button with a line break with link_to [Note]
Webpack and webpacker I want to tell Ruby people right now
I want to connect SONY headphones WH-1000XM4 with LDAC on ubuntu 20.04! !!
I want to hook log file generation / open with log4j # FileAppender
I want to return to the previous screen with kotlin and java!
I want to INSERT Spring Local Time with MySQL Time (also milliseconds)
I want to operate cron with GUI, so I will install Dkron
What I was addicted to when implementing google authentication with rails
I want to add devise in Rails, but I can't bundle install
[Java] I want to perform distinct with the key in the object
I want to perform asynchronous processing and periodic execution with Rail !!!
I want to extract between character strings with a regular expression
I tried to make a group function (bulletin board) with Rails
I want to develop a web application!
[Rails] I want to send data of different models in a form
I want to write a nice build.gradle