@belgoros - your notes were essential for me working this out. Thanks so much for doing some hard yards in there!
Have it up and running!
phoenix “1.4.1”
foundation “6.6.1”
mac_osx: 10.15.3
node: 13.12.0
Getting Foundation working within Phoenix
Step 1. Getting Foundation in the right spot
I couldn’t get the foundation-cli working: it has a problem with node versions > 10.x; and as I am running node version 13.12.x, it was easier just to get the git version 6.6.1 from github.
- Download foundation 6.6.1 from github
- Unzip the download file into
project_folder/assets/node_modules
- Make sure the directory name is foundation-sites (mine was called foundation-sites-develop)
- cd
project_folder/assets/node_modules/foundation-site
and view the README.md file. Within here there should be instructions on how to get foundation-site running…
- npm install
- npm start
- after it starts, you can stop this running
- go back to your assets folder
cd ../..
Step 2. Update your phoenix files
Change the extension of your app.css file
% mv assets/css/app.css -> assets/css/app.scss
// file: app.scss
@import "~foundation-sites/scss/foundation";
@include foundation-everything();
@import "./phoenix.css";
Edit your assets/js/app.js
// We need to import jquery for the webpack build of foundation
// And attach the foundation build to the document
import $ from 'jquery'
require('what-input');
window.$ = $;
import Foundation from 'foundation-sites';
$(document).foundation();
// 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, for example:
// import socket from "./socket"
Step 3. Change the Phoenix setup
Here is my webpack.config.js file
!Important! - this includes a couple of packages you need to install first, cause if you don’t you will get errors on build.
% npm install jquery
% npm install sass-loader
% npm install node-sass
% npm install autoprefixer
% npm install webpack
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');
const webpack = require('webpack');
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: /\.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins: [
require('autoprefixer'),
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
new webpack.ProvidePlugin({ // inject modules as global vars
$: 'jquery',
jQuery: 'jquery', 'window.jQuery': 'jquery',
})
]
});
Hope this helps.