DEV Community

Discussion on: How to set up Ruby on Rails 6 and TailwindCSS 1.1.4

Collapse
 
belgoros profile image
Serguei Cambour

Thank you very much for the detailed article, Andrew! One point is about removing app/assets folder which contains manifest.js file. If I remove it, I get:

sprockets/railtie.rb:105:in `block in <class:Railtie>': Expected to find a manifest file in `app/assets/config/manifest.js` (Sprockets::Railtie::ManifestNeededError)
But did not, please create this file and use it to link any assets that need
to be rendered by your app:

Example:
  //= link_tree ../images
  //= link_directory ../javascripts .js
  //= link_directory ../stylesheets .css
and restart your server
Enter fullscreen mode Exit fullscreen mode

I'm using Rails 6.0.2 version with Ruby 2.7.0. Another question I can't find the right answer is about the syntax to use in javascript/packs/application.js file. You used import '../src/application.scss'. It worked for me. Another resource es used it as require('../css/application.scss') and it worked as well. Sometimes it is really frustrating to not find the right way to follow as Rails guides still have nothing explaining this point, event after more then 6 month after its release.

Collapse
 
promisepreston profile image
Promise Chukwuenyem • Edited

Firstly, you could use still use the app/assets folder. It's a choice. I often use it for images and stylesheets and the javascript/packs folder for javascript files. So this way I will not need to tweak my app/views/layouts/application.html.erb by changing:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Enter fullscreen mode Exit fullscreen mode

to:

<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Enter fullscreen mode Exit fullscreen mode

Secondly, import '../src/application.scss' and require('../css/application.scss') can be used interchangeably. I often use require as it saves me the stress of specifying the full path of the module. The major difference between require and import , is that require will automatically scan node_modules folder to find modules, but import , which comes from ES6 doesn't so you must specify the path of the module.

Read up more here: The difference between “require(x)” and “import x”