How to install bootstrap in my project?
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 theassets/scss
folder you created are watched while you’re developing so that changes are compiled and loaded into theassets/css
folder -
Now if you fire up your
phx.server
and edit the sass files in theassets/scss
folder, the page should refresh with the changes compiled into the relevant file(s) in theassets/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"
]
...