How to install bootstrap in Phoenix 1.4?

[twan]

How to install bootstrap in my project?

[easco]

In Phoenix 1.4 the bundler used for JavaScript and CSS assets is Webpack. To integrate Bootstrap into your project, you should look for instructions on installing Bootstrap through Webpack:

Webpack

The Webpack configuration and sources are found in the assets folder.

[twan]

Sorry.Wrong delete.
Hi @easco , Thanks.
Now i using npm to install jquery-confirm.js and i have to import it in my app.js.
but how to using or import that jquery-confirm.css style to my project.

[sweeneydavidj]

Hi,
you can import it at the top of your app.css
for example in mine I have…
@import "./bootstrap.min.css";

[twan]

Hi, Thanks.
i need copy out jquery-confirm css from node_modules to my css folder and import in my app.css files?
that css in folder node_modules/jquery-confirm/css/jquery-confirm.css.

[kokolegorille]

You can reference the relative path too… like this

@import '../node_modules/bootstrap/scss/bootstrap';
@import '../node_modules/font-awesome/css/font-awesome.css';

Please check your path correspond…

At the end of the process, all css are merged into one file by MiniCssExtractPlugin.

[lurnid]

This is how I got Bootstrap 4.3 installed in Phoenix 1.4:

• In the project’s /assets directory:

$ npm i -D bootstrap
$ npm install --save jquery popper.js

• Add this line to your application’s app.js:

import 'bootstrap’;

• Add a scss folder under the /assets folder.
• In the scss folder, create a file called _custom.scss for bootstrap settings overrides.
• Create a file called app.scss in that folder and put these lines in it:

@import "../node_modules/bootstrap/scss/bootstrap”; (or you can import individual components)
@import "custom";

• For Bootstrap to compile, make sure you install and use the required loaders: sass-loader, postcss-loader with Autoprefixer. With minimal setup, your webpack config should include this rule or similar:

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
…

• Add this line to your config/dev.exs so that the contents of the assets/scss folder you created are watched while you’re developing so that changes are compiled and loaded into the assets/css folder

• Now if you fire up your phx.server and edit the sass files in the assets/scss folder, the page should refresh with the changes compiled into the relevant file(s) in the assets/css folder

[lurnid]

@import "…/node_modules/bootstrap/scss/bootstrap”; (or you can import individual components) @import “custom”;

I mixed up the order of these lines. They should be in reverse order:

@import "custom";
@import "../node_modules/bootstrap/scss/bootstrap”; (or you can import individual components)

I also realise that I forgot to add the code related to the penultimate bullet point. These are the lines that should be added to your config/dev.exs (assuming you have sass installed):

watchers: [
  ...
  sass: [
    "--watch",
    "assets/scss:assets/css"
  ]
  ...