This cannot be the correct behavior, right?
Nope. It is when you add new files, it needs a new build then in order to recognize changes but that shouldn’t be happening on existing files / directives.
Does the (S)CSS work fine? Any errors / console statements? Are all of Sage’s dependencies up to date?
Hi,
do you have right theme folder in config.json? Could you send us your config?
Martin.
Here is my config.json file. SCSS doesn’t compile at, and even when I start yarn run start it doesn’t create a dist/styles/main.css file either, but it DOES create a dist/scripts/main.js file, but only when running yarn run start not when files have been modified while webpack is running. My test Sage theme is located in wp-content/app/themes/sage but before putting it in the app folder, which I never have really done with wordpress themes before, the same issue is happening when I installed sage into wp-content/themes/sage
{
"entry": {
"main": [
"./scripts/main.js",
"./styles/main.scss"
],
"customizer": [
"./scripts/customizer.js"
]
},
"publicPath": "/app/themes/sage",
"devUrl": "http://www.sagetest.local",
"proxyUrl": "http://localhost:3000",
"cacheBusting": "[name]_[hash:8]",
"watch": [
"app/**/*.php",
"config/**/*.php",
"resources/views/**/*.php"
]
}
Also, whenever I make a change to the main.js file, it does say it compiled, but the main.js file does not update. However, i do see my change in one of the json files in the .cache-loader folder too
All of my tests have been run just by doing composer create-project roots/sage sage dev-master so I assume it’s up to date? I have node 9.11.1 and npm 5.6.0 installed too, if that helps.
Sorry, first time using discourse 
See my reply above
Yes, they are all up to date, and I am using the composer create-project roots/sage sage dev-master command to download and set up the theme
Hi, move Sage theme to /wp-content/themes/sage then change “publicPath” in your config to /wp-content/themes/sage, delete .cache-loader forlder and dist folder (if exist) and after this steps try yarn run start if it works.
So your main.css is not being compiled correctly? If so then you should inspect that, seems to be a more general issue. Any errors being thrown?
Also, whenever I make a change to the main.js file, it does say it compiled, but the main.js file does not update. However, i do see my change in one of the json files in the .cache-loader folder too
If I’m not mistaken then the changes you make are virtually injected into the file and thus you won’t see the actual file changing until you re-build.
Please run a test with a simple console.log or whatever and see if the new code is being injected & executed. If so then I don’t know why you would be worried…
@Martin_Kucera I did what you said, but nothing. I also tried deleting the .cache-loader folder while yarn/webpack was running and tried adding code to resources/assets/scripts/routes/home.js as well as resources/assets/scripts/main.js, but that didn’t work. I also removed the dist folder while yarn was running too and retried adding new code to the .JS files, but that didn’t work either.
I also just downgraded my node to 8.11.1 to make sure that wasn’t it. re-ran yarn and did yarn run start but still no dice
Another weird thing is I don’t even see this being used in webpack, not sure if that’s an issue, but. Just trying to rubber duck as much as I can.
@evance Yeah, none of it compiles while yarn is running. I am checking the dist folder after adding simple code. If I add bad CSS to the SCSS file, I do get errors saying it’s malformed, but once i fix the error, the main.css still doesn’t compile. I am used to using gulp on a handful of projects, so whenever I make changes to custom JS or SCSS files, they get processed / minified / stored into a specific folder I configured in the gulp file. Sage however, is not using that workflow. The assets only get compiled when I run yarn run start. So if I make a change to any asset that’s supposed to get compiled. I need to halt yarn, and do yarn run start to compile it.
Here’s an example video of the issue I am having:
Please run a test with a simple console_log or whatever and see if the new code is being injected & executed. If so then I don’t know why you would be worried…
Did you do this? In simple steps:
yarn run startcommon.js and introduce a simple console.log, onClick or similarI am checking the dist folder after adding simple code.
Pretty sure that you won’t see any actual file edits so it’s pointless to check. The code is injected and only changes upon a new build.
@evance Still no dice. I did both a console.log and an alert in resources/assets/scripts/routes/common.js and resources/assets/scripts/main.js, and I don’t see anything popping up or getting written out in console. Even though webpack says it compiled. I think halt webpack/yarn, and do yarn run start again, then THEN the console.log and alert works.
I also didn’t use dev-master to build the theme this time, I used the stable version.
I am going to try it on my mac mini to see if that works, since that environment is different in a certain sense. Not much is installed as far as webdev libs
I just tried to compile the main.js on an entirely different machine (mac mini) with a fresh install of composer, and yarn, but that still doesn’t compile down while webpack is running after making a change to common.js or main.js. I am at a loss here.
OK, I can confirm that the JS doesn’t inject properly with my current setup as well…
Unfortunately all I can do is to direct you to this thread which may or may not have additional info on the issue.
Can somebody else chip in? Any thoughts?
@evance @Martin_Kucera Great news. I have it working now. I tried the whole installation process again tonight, and I noticed that in the README.md file, they changed the command to start webpack. It’s now yarn start instead of yarn run start. I can now confirm that styles and scripts are now being injected into the browser!
Thanks for all your help on this, and sorry for the frustration. It was frustrating me as well, but glad it’s all sorted out. I am wondering if the yarn command was wrong in the first place in the README.md or what?
Thanks!
@aolin480Its great! 