Phoenix 1.4, Webpack 4 and Bulma, Bootstrap 4 SASS

Phoenix Forum Questions / Help
, ,
21

Did you ran npm run build (or whatever you named it) to build your assets with Webpack? got any errors?

It’d helpful if you can share your webpack.config.js with us. Also if you’re not referencing “css” inside your JavaScript, keep it simple:

import '../css/app.scss';

1 Like
22

A bit different setup than OP, but my starter project uses bulma and may be useful as a reference while debugging: https://github.com/awestbro/phoenix-starter

1 Like
23

@adrianrl thank you for your help ! I did run npm run build; I actually forgot to import bulma in app.scss… my bad.

24

Hi, I have tried setting it up the same way as well as https://andrew.coffee/blog/2018/06/how-to-use-sass-scss-with-webpack-in-phoenix-1-4 and editing the assets/css/app.scss file won’t update the priv/static/css/app.css one. Do you know what might be the problem?

Running manually node node_modules/webpack/bin/webpack.js --mode development from the assets folder updates the files with no error…

edit: nevermind, I didn’t change a thing and it started working somehow…

1 Like
25

I have a question related to Webpack’s watch options. I noticed that files placed in ./vendor/**/*.js do not live reload, and return NOENT errors if a file is deleted or added while the VM and webpack is running in development mode.

Can someone guide me on how to get vendor JS files (and CSS) files to automatically recompile? I followed this guide from https://gist.github.com/nicbet/430afc20b8140839539f243feeec3efe.

26

I get the following error :

Uncaught Error: Module parse failed: Unexpected character '@' (3:0) You may need an appropriate loader to handle this file type. | /* This file is for your main application css. */ | | @import "./phoenix"; | at eval (app.scss:1)

27

Welcome, It is complaining about scss, how is the rule for scss in your webpack.config.js? Did You add node-sass and sass-loader?

28

Can’t manage to make my webpack work is it a bug my problem is here