I have a materialized template which I want to integrate into my Phoenix application.
But I have been having trouble making this happen, Webpack is not loading my css and js files.
Below are the details of my configuration and the error.
######## APP.CSS #####################
@import "./phoenix.css";
@import "../app-assets/vendors/vendors.min.css";
@import "../app-assets/vendors/flag-icon/css/flag-icon.min.css";
@import "../app-assets/vendors/materialize-stepper/materialize-stepper.min.css";
@import "../app-assets/css/themes/vertical-dark-menu-template/materialize.css";
@import "../app-assets/css/themes/vertical-dark-menu-template/style.css";
@import "../app-assets/css/pages/form-wizard.css";
@import "../app-assets/css/custom/custom.css";
####### 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?$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader',]
},{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000'},
],
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.scss' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
]
});
######################### PACKAGE.json ###################
{
"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": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.0",
"copy-webpack-plugin": "^4.5.0",
"css-loader": "^0.28.10",
"sass-loader": "^8.0.0",
"mini-css-extract-plugin": "^0.4.0",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"uglifyjs-webpack-plugin": "^1.2.4",
"webpack": "4.4.0",
"webpack-cli": "^2.0.10"
}
}
####### ######## ERROR WHEN I EXECUTE mix phx.server #############
ERROR in ./css/app.scss
Module build failed: ModuleBuildError: Module build failed: Error: Cannot find module 'node-sass'
at Function.Module._resolveFilename (module.js:527:15)
at Function.Module._load (module.js:476:23)
at Module.require (module.js:568:17)
..................................
Please what am I doing wrong here. I have almost search all links google can provide yet to solution.
Thanks in advance.