Webpack compil problem

sage
1

Hello,

I’m pretty new to Sage.
I’m doing my first Wordpress Theme from scratch but I have some issues with webpack.
It might be my own error as i’m a newbie, but i can’t figure out how to fixe it.

I do not have any errors, but, webpack doesn’t compil the scss.
In my phpstorm console I do :
wp server

PHP 7.3.5 Development Server started at Mon Oct 26 09:38:29 2020
Listening on http://localhost:8080
Document root is C:\wamp64\www\myproject
Press Ctrl-C to quit.

npm run start

sage@9.0.9 start C:\wamp64\www\myproject\wp-content\themes\mytheme
webpack --hide-modules --watch --config resources/assets/build/webpack.config.js

[HTML Injector] Running…
[Browsersync] Proxying: http://localhost:8080
[Browsersync] Access URLs:

   Local: http://localhost:8080
External: http://IP:8080

      UI: http://localhost:3001

UI External: http://localhost:3001

[Browsersync] Watching files…
DONE Compiled successfully in 1380ms

It does open the browser, open the project and I have all the pages I need.
then, when I change some scss or even style in views…
Let’s say in styles > layouts > _footer.scss

.page-footer {
  background-color: black;
}

DONE Compiled successfully in 3192ms

But, nothing refreshing on the website ( as webpack should do, if I anderstand it well… :smiley: )
However, if I stop npm run start and I start is back again, the changes work and my footer is black.

My guess is that their is a pb on the refreshing of the page, but no error message, I don’t know where to look.

More infos :
I did not touched the webpack files BUT I did have a pb to install sass with this commande :
( npm install did not work for me, he blocked on sass eveytime. )

npm install node-sass@4.12.0

I’ll take any idea…

2

I just tried to delete my node_modules and reinstall with yarn.

composer install

yarn install

yarn run start

It worked, no error, but doesn’t compil what i need, still.

3

Hello,
i have the same probleme here. Could it be a problem with the Eslint, meaning that the writing conventions for scss are not respected so, the compilation is not working ?
Let’s try to deactivate it.

4

Not this is not related to eslint or .stylelintrc.js. the terminal would show an error, would’n’t it ?

And when i use “yarn build”, the compilation is working.
0_o

5

After running npm run start what url are you viewing your site on?

6

wp server open : http://localhost:8080/

npm run start open : http://localhost:3000/ ( mylocalhostpage with my fiels )
And when i click on mywordpress : http://localhost:8080/mywordpress/

My config.json as been changed to that :

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/sage",
  "output": {
    "path": "dist",
    "publicPath": "/mywordpress/themes/themename/dist/"
  },
  "devUrl": "http://localhost"
}

I still have the same pb. :confused:

7

Which version of Sage are you using? Your config.json seems different than the one that ships with sage: https://github.com/roots/sage/blob/9.0.9/resources/assets/config.json

Your devUrl doesn’t appear to correspond to your actual url. If your WordPress site is at http://localhost:8080/mywordpress/ then your config.json should reflect that.

8

I did change it because with the version that came with Sage, it doesn’t even charge my page…

I can change it back and give you the info i needed.

I changed it to OG :
npm run start opens : http://localhost:3000/
Say that he compiles :

[HTML Injector] Running…
[Browsersync] Proxying: http://localhost:8080
[Browsersync] Access URLs:

   Local: http://localhost:3000/wordpress
External: http://IP:3000/wordpress

      UI: http://localhost:3001

UI External: http://localhost:3001

[Browsersync] Watching files…

Never charge the needed page. just load infinitly.