Hello, I have read some post on internet like this:
https://medium.com/wecode-ng/how-to-install-bootstrap-on-phoenix-1-4-project-c8aa724dcdeb
but I still have problems to install bootstrap 4 in phoenix 1.4.
Step 1:
I went asset folder and run this commands
npm install --save bootstrap
npm install --save jquery popper.js
npm install — save-dev file-loader
Step 2:
I went app.js
file and added these lines:
import css from "../css/app.scss"
import "bootstrap";
Step 3:
Then I renamed the app.css
to app.scss
and added these lines:
@import "/css/fontawesome.min.css";
@import "~bootstrap/scss/bootstrap";
or
@import '../node_modules/bootstrap/scss/bootstrap';
@import '../node_modules/font-awesome/css/font-awesome.css';
Step 4
I edited my webpack.config.js
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = (env, options) => ({
optimization: {
minimizer: [
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
'./js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, '../priv/static/js')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {}
},
{
loader: 'sass-loader',
options: {}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
]
});
after that I run the iex -S mix phx.server
but it can’t find app.scss
and loads bootstrap.
how can I fix and install bootstrap 4 in phoenix 1.4?
Thanks