Skip to content

Instantly share code, notes, and snippets.

@yalab

yalab/bootstrap-memo.md

Last active July 20, 2022 20:29
Show Gist options
  • Save yalab/cad361056bae02a5f45d1ace7f1d86ef to your computer and use it in GitHub Desktop.
Save yalab/cad361056bae02a5f45d1ace7f1d86ef to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yalab revised this gist Aug 31, 2017. 1 changed file with 15 additions and 15 deletions.
    30 changes: 15 additions & 15 deletions bootstrap-memo.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,21 +6,21 @@ $ yarn add [email protected] jquery popper.js
    ```

    ```diff
    diff --git a/config/webpack/shared.js b/config/webpack/shared.js
    index d901cc6..fe9a34d 100644
    --- a/config/webpack/shared.js
    +++ b/config/webpack/shared.js
    @@ -41,6 +41,11 @@ module.exports = {
    new ManifestPlugin({
    publicPath: output.publicPath,
    writeToFileEmit: true
    + }),
    + new webpack.ProvidePlugin({
    + $: "jquery",
    + jQuery: "jquery",
    + Popper: ['popper.js', 'default']
    })
    ],
    diff --git a/config/webpack/environment.js b/config/webpack/environment.js
    index d16d9af..86bf1a7 100644
    --- a/config/webpack/environment.js
    +++ b/config/webpack/environment.js
    @@ -1,3 +1,10 @@
    const { environment } = require('@rails/webpacker')

    +const webpack = require('webpack')
    +environment.plugins.set('Provide', new webpack.ProvidePlugin({
    + $: 'jquery',
    + jQuery: 'jquery',
    + Popper: ['popper.js', 'default']
    +}))
    +
    module.exports = environment
    ```

    ```scss
  2. yalab revised this gist Aug 30, 2017. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions bootstrap-memo.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,11 @@
    ```
    ```bash
    $ echo 'gem "webpacker"' >> Gemfile
    $ bundle install
    $ rails webpacker:install
    $ yarn add [email protected] jquery popper.js
    ```

    ```
    ```diff
    diff --git a/config/webpack/shared.js b/config/webpack/shared.js
    index d901cc6..fe9a34d 100644
    --- a/config/webpack/shared.js
    @@ -23,17 +23,17 @@ index d901cc6..fe9a34d 100644
    ],
    ```

    ```
    ```scss
    // app/javascript/packs/bootstrap.scss
    @import '~bootstrap/dist/css/bootstrap';
    ```

    ```
    ```js
    // app/javascript/packs/applicatoin.js
    import 'bootstrap/dist/js/bootstrap';
    ```

    ```
    ```erb
    --- a/app/views/layouts/application.html.erb
    +++ b/app/views/layouts/application.html.erb
    @@ -6,6 +6,8 @@
  3. yalab renamed this gist Aug 30, 2017. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → bootstrap-memo.md
    View file
    File renamed without changes.
  4. yalab created this gist Aug 30, 2017.
    48 changes: 48 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    ```
    $ echo 'gem "webpacker"' >> Gemfile
    $ bundle install
    $ rails webpacker:install
    $ yarn add [email protected] jquery popper.js
    ```

    ```
    diff --git a/config/webpack/shared.js b/config/webpack/shared.js
    index d901cc6..fe9a34d 100644
    --- a/config/webpack/shared.js
    +++ b/config/webpack/shared.js
    @@ -41,6 +41,11 @@ module.exports = {
    new ManifestPlugin({
    publicPath: output.publicPath,
    writeToFileEmit: true
    + }),
    + new webpack.ProvidePlugin({
    + $: "jquery",
    + jQuery: "jquery",
    + Popper: ['popper.js', 'default']
    })
    ],
    ```

    ```
    // app/javascript/packs/bootstrap.scss
    @import '~bootstrap/dist/css/bootstrap';
    ```

    ```
    // app/javascript/packs/applicatoin.js
    import 'bootstrap/dist/js/bootstrap';
    ```

    ```
    --- a/app/views/layouts/application.html.erb
    +++ b/app/views/layouts/application.html.erb
    @@ -6,6 +6,8 @@

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    + <%= javascript_pack_tag 'application' %>
    + <%= stylesheet_pack_tag 'bootstrap' %>
    </head>

    <body>
    ```