putting css stylesheets for rails api

user_3133518 0
Viewed 593

My existing project is built under Ruby on Rails api, creating by:

rails new my_apps --api

which means there is totally no assets folder under app, no UI as well.

However, with current requirement , I have to add in some pages for this existing rails (for example: building the Wiki for my API).

Question is, how do I add in the stylesheets folder, as well as css files to my current project, so i could use something like:

<%= stylesheet_link_tag 'mycss' %>

EDIT:

For more information, we use 2 gems react-rails and webpacker to setup a react front-end. After installation, the javascript will be installed in app/javascript/packs

Here is the default webpacker.yml file:

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
webpack ruby-on-rails
1 Answers

As 'rails new my_apps --api' is the only API rails application creation command. It does not create any default assets configuration for all the environments. As we try to customise it. It would be the tedious task to manage all the stuff. To avoid such situation there is a solution mentioned below:

Set layout method in any application_controller.rb as given below:

class ApplicationController < ActionController::Base
  layout 'application'

Create style.css into /public/assets/stylesheet/ directory.

h1{
  color: red;
}

Create application.html.erb layout file into app/views/layout/ directory.

<!DOCTYPE html>
<html>
  <head>
    <title>Demo App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <%= stylesheet_link_tag '/assets/stylesheet/style.css', media: 'all'%>
  </head>

  <body>
    <h1>Hellow World</h1>
    <%= yield %>
  </body>
</html>
user_99893840
Related