0

I'm setup rails 7 app. And i wan't to add bootstrap and jquery using import map. I'll try but didn't work. I follow this step if i made any mistake please correct.

  1. rails new demo
  2. bundle install
  3. create demo controller with index and add some bootstrap code.
  4. Then i run this command bin/importmap pin bootstrap

So. in Import map added this two line pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.1.3/dist/js/bootstrap.esm.js" pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.5/lib/index.js"

If i already pin bootstrap in importmap.rb file. Why it's not working or i missing some configration.

Thanks for replay.

hardik
  • 39
  • 6

1 Answers1

0

Please check that you have following files with corresponding content:

// app/stylesheets/application.bootstrap.scss

@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';

# package.json

{
  "dependencies": {
    "bootstrap": "^5.1.3",
    "sass": "^1.50.0"
  },
  "scripts": {
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

# app/javascript/application.js

import * as bootstrap from "bootstrap"

# config/importmap.rb

pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.1.3/dist/js/bootstrap.esm.js"

# app/views/layouts/application.html.{erb|slim|haml}

<head>
  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_importmap_tags %>
</head>

And run server with bin/dev command

To install JQuery run bin/importmap pin jquery command and import it in application.js file

# app/javascript/application.js

import { $, jQuery } from 'jquery'

// export for others scripts to use
window.$ = $
window.jQuery = jQuery
Yurii Stefaniuk
  • 1,594
  • 2
  • 11
  • 16
  • Thanks for the replay. But when I create a new app package.json + application.bootstrap.scss file is not created. Other config are fine. – hardik Jun 18 '22 at 07:15
  • I try with bin command but didn't work. I think i missed some config. – hardik Jun 18 '22 at 07:31
  • Can you try to run `rails css:install:bootstrap`?. It will add missing files. Also try to rebuild css `rails css:build` – Yurii Stefaniuk Jun 18 '22 at 08:11
  • I'll try but didn't work. When I try to build command it's show me an error like Don't know how to build task 'css:install:bootstrap' (See the list of available tasks with `rails --tasks`). But I'll try to fix this issue. Thaks for help. – hardik Jun 18 '22 at 09:02