Adding Bootstrap to Phoenix using NPM
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 1. Add Bootstrap as a dependency in package.json | |
{ | |
... | |
"dependencies": { | |
... | |
"bootstrap": "~3.3.6" | |
} | |
} | |
// 2. Modify brunch-config.js | |
exports.config = { | |
... | |
npm: { | |
enabled: true, | |
// Whitelist the npm deps to be pulled in as front-end assets. | |
// All other deps in package.json will be excluded from the bundle. | |
whitelist: ["phoenix", "phoenix_html"], | |
styles: {bootstrap: ["dist/css/bootstrap.css"]} | |
} | |
}; |
How is bootstrap.js
loaded?
You can add import "bootstrap"
to your app.js.
Make sure to include jQuery as npm dependency and add this to the brunch-config:
npm: {
globals: {
$: 'jquery',
jQuery: 'jquery'
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Where will the styles end up here - included in
app.css
?