Ich werde erklären, wie Bootstrap in Rails installiert wird. Das Verfahren ist sehr einfach, bitte beziehen Sie sich darauf! !! Es gibt vier Schritte.
** 1. Installieren Sie Bootstrap 2. Erstellen einer SCSS-Datei 3. Ändern Sie die JS-Datei 4. Schienen (Ruma) neu starten **
Bei Verwendung von Bootstrap mit Rails wird häufig mit Gems installiert. Bootstrap verwendet jQuery intern, also installieren wir es auch. Fügen Sie Ihrem Gemfile Folgendes hinzu und versuchen Sie, die Bundle-Installation auszuführen.
Gemfile
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
Terminal
% bundle install
** Benennen Sie anschließend application.css in den Dateinamen application.scss um. ** **. Dies liegt daran, dass Bootstrap in der Notation "SCSS" geschrieben ist und auch in Rails verwendet wird. "SCSS" ist eine Notation, die CSS erweitert und in der aktuellen Webbranche weit verbreitet ist. Ich werde es hier nicht im Detail erklären, aber ich stelle es mir als eine Notation vor, die einfacher zu lesen und zu schreiben ist als die CSS-Beschreibung.
Dateierweiterung ändern
Vor dem Ändern der App/assets/stylesheets/application.css
Nach dem App-Wechsel/assets/stylesheets/application.scss
Öffnen Sie die Datei nach dem Umbenennen der Datei. *** = require_tree. Und * = require_self werden gelöscht und Fügen Sie @import "bootstrap" hinzu; ** **. Der hinzugefügte Code ist die Einstellung zum Laden von Bootstrap.
app/assets/stylesheets/application.scss
/*
* 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 .<(Gelöscht)
*= require_self <(gelöscht)
*/
@import "bootstrap";<(Ergänzung)
Legen Sie fest, dass verwandte Dateien wie "JavaScript" und "jQuery" gelesen werden sollen, die in Bootstrap verwendet werden. Öffnen Sie app / assets / javascripts / application.js und fügen Sie es über dem ursprünglichen Code hinzu, indem Sie auf Folgendes verweisen.
app/assets/javascripts/application.js
#Die folgenden drei wurden hinzugefügt
//= require jquery3
//= require popper
//= require bootstrap
#Originalcode
//= require rails-ujs
//= require activestorage
//= require turbolinks
Bitte versuchen Sie einmal, über Ihren Browser darauf zuzugreifen. Wenn zu diesem Zeitpunkt ein Fehler auftritt, starten Sie Rails (Puma) neu. Wenn der Fehler weiterhin besteht, ist die Version von "node.js" möglicherweise veraltet. Wenn Sie Rails mit Docker erstellt haben, überprüfen Sie, ob die Docker-Datei die folgenden Einstellungen aufweist.
Dockerfile
#Installieren Sie die erforderlichen Pakete für Rails
RUN apt-get update -qq && apt-get install -y nodejs
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - \
&& apt-get install -y nodejs
#In der Beschreibung der offiziellen Website unten, Knoten.Die Version von js ist niedrig und Bootstrap kann nicht verwendet werden
# RUN apt-get update -qq && apt-get install -y nodejs
Möglicherweise ist das Installationsverfahren schwierig, Sie können jedoch die Beschreibung löschen oder das hier beschriebene Verfahren befolgen. Es ist überraschend einfach, weil Sie es nur umschreiben müssen. Bitte probieren Sie es aus! !!
Recommended Posts