3

I have been trying for more than a week trying to put a custom template in a Rails application in version 6. Whether using Yarn or referencing directly in html, assets are never found.

GET http://localhost:3000/assets/vendors/iconfonts/mdi/css/materialdesignicons net::ERR_ABORTED 404 (Not Found)

The assets are inside the Vendor folder. Note that inside the folder is another one called "vendors" so this is not a mistake.

I have in my application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("jquery")
require("popper.js")
require("bootstrap")

require('vendors/js/vendor.bundle.base')
require('vendors/js/vendor.bundle.addons')
require('js/shared/off-canvas')
require('js/shared/misc')

I've also tried using another template following asset pipeline best practices, and it didn't work like this one now.

This is the path wehre the template is.

My application.css is:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 @import "vendors/iconfonts/mdi/css/materialdesignicons";
 @import "vendors/iconfonts/ionicons/css/ionicons";
 @import "vendors/iconfonts/typicons/src/font/typicons";
 @import "vendors/iconfonts/flag-icon-css/css/flag-icon";
 @import "vendors/css/vendor.bundle.base";
 @import "vendors/css/vendor.bundle.addons";

 @import "css/shared/style";
 @import "css/demo_1/style";

But I've tried other ways too, using require, and as I said before, linking it directly inside the HTML, right now it is like this:

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>School</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_packs_with_chunks_tag 'application' %>
    <link rel="shortcut icon" href="/images/favicon.png" />
  </head>
  <body>
...

I already run the commands: rails webpacker:install rails assets:precompile Also, I've changed the application.rb adding config.serve_static_assets = true, but nothing seems to work, I always got a page no themed.

Rails version: 6.0.2.1

Ruby version: 2.6.5p114 (2019-10-01 revision 67812) [x64-mingw32]

Node version: v12.14.1

Yarn version: 1.21.1

SO: Windows 10

I don't know what I con do to fix that 'Not Found' error.

JoaoPhelippe
  • 57
  • 1
  • 5

1 Answers1

1

Using Rails-UJS in JS modules (Rails 6 with webpacker)

Your application.js needs to be moved to a different folder for webpacker to be able to use it.

app/javascript/packs/application.js

Techpuffin
  • 156
  • 3
  • For some reason it changed a lot, and worked moving the assets directly to Stylesheets and Javascript/packs paths. It doesn't work, for me at least, to use the vendor/assets or lib/assets for custom assets anymore. Tkx. – JoaoPhelippe Jan 12 '20 at 22:57
  • From rails 6+ webpacker will be used for Javascript. glad I can help. – Techpuffin Jan 13 '20 at 00:37