Skip to content

Instantly share code, notes, and snippets.

@nicbet
Last active April 28, 2020 05:43
Show Gist options
  • Save nicbet/430afc20b8140839539f243feeec3efe to your computer and use it in GitHub Desktop.
Save nicbet/430afc20b8140839539f243feeec3efe to your computer and use it in GitHub Desktop.
Sass versions of Bootstrap 4 and Fontawesome 5 with Elixir / Phoenix Framework 1.3.x and 1.4.x using Webpack
/* Boostrap overrides */
$primary: #F92653;
/* Fontawesome 5 config */
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts"

SASS Versions of

  • Fontawesome 5
  • Bootstrap 4

in Phoenix 1.3 and 1.4 via Webpack

// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import css from "../css/app.scss"
// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import dependencies
//
import "phoenix_html"
// Import local files
//
// Local files can be imported directly using relative
// paths "./socket" or full ones "web/static/js/socket".
// import socket from "./socket"
/* This file is for your main application css. */
@import "custom";
@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/fa-brands";
@import "~@fortawesome/fontawesome-free/scss/fa-solid";
@import "~@fortawesome/fontawesome-free/scss/fa-regular";
...
# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with webpack to recompile .js and .css sources.
config :hello, HelloWeb.Endpoint,
...
watchers: [node: ["node_modules/webpack/bin/webpack.js", "--mode", "development", "--watch-stdin",
cd: Path.expand("../assets", __DIR__)]]
...
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "webpack --mode production",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html"
},
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.1.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-preset-env": "^1.6.1",
"bootstrap": "4.1.1",
"copy-webpack-plugin": "^4.5.0",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"jquery": "^3.3.1",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"popper.js": "^1.14.3",
"postcss-loader": "^2.1.5",
"sass-loader": "^7.0.3",
"uglifyjs-webpack-plugin": "^1.2.4",
"webpack": "4.4.0",
"webpack-cli": "^2.0.10"
}
}
const path = require('path');
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',
output: {
filename: 'app.js',
path: path.resolve(__dirname, '../priv/static/js')
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')
],
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../fonts'
}
}]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '../css/app.css'
}),
new CopyWebpackPlugin([{
from: 'static/',
to: '../'
}])
]
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment