How to install bootstrap in Phoenix 1.4?

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:

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

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.

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

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.

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.

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

@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"
  ]
  ...