Sage 9 Alpha 4 - 'npm start' dont change styles

EDIT:
sorry this is stupid … I forget to add the / in:

"publicPath": "/wp-content/themes/startup",


When i run ‘npm start’ all my styles and javascript are updated but if I then re-adjust a .scss or .js file my browser reload but does not make any changes. only .php files do change. Im not using bedrock, just the sage theme.

Here is my config.json:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "watch": [
    "assets/scripts/**/*.js",
    "assets/styles/**/*.scss",
    "templates/**/*.php",
    "src/**/*.php"
  ],
  "publicPath": "wp-content/themes/startup",
  "devUrl": "http://localhost/startup/",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]"
}
1 Like

Same problem here! I dont know why!

this is my config

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "watch": [
    "templates/**/*.php",
    "src/**/*.php"
  ],
  "publicPath": "/wp-content/themes/volta",
  "devUrl": "http://volta.local",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]"
}

When you want to browsersync on changeing scss or javascript try:

"watch": [
    "assets/scripts/**/*.js",
    "assets/styles/**/*.scss",
    "templates/**/*.php",
    "src/**/*.php"

And instead of using http://volta.local try http://localhost/path/of/project

You don’t need to add these to watch, it’s already handled by BrowserSync.

I’m having this problem as well, and @MaxSwinkels solution (to add the watch file references) worked. @ben I wonder if there’s a bug in that part of the webpack config? I’ll do some more investigating.

Just to add to this, a weird side effect I’m seeing is that the style edits are being replayed in their entirety every time the browser reloads. So for example, if I’ve made 10 edits to a SCSS file, on the 10th save the browser reloads but plays all 9 previous edits in a quick flash before reaching the 10th. Might be because I’m now referencing the files twice with the workaround edit. Not sure really. * head scratch *

It could be your editor.

In the Jetbrains editors, you need to go into Settings -> Appearance & Behavior -> System Settings
disable “Use ‘safe write’ (save changes to a temporary file first)”

I’m using Atom - is that a problem across all editors?

Ah man… sorry for the forum spam. The original problem has inexplicably disappeared - I removed @MaxSwinkels watch refs, and things are working fine for some reason. The flashing edits issue has gone too.

Might be time to call it a day and commit stuff before something else blows up!

Not necessarily. That just happens to be the editor I use and what I did to resolve the issue.

You can also try adding watchOptions.poll.

Add

watchOptions: { poll: true }

to

https://github.com/roots/sage/blob/master/assets/build/webpack.config.watch.js#L6-L10

I think you could also try changing --watch to --watch-poll in package.json, but I’m not sure if that’s available in webpack 2.

1 Like

No problems :slight_smile: Thanks for helping to find a solution. For me its working now im using Sublime text 3 but i don’t think the editor is the problem.

Hello, I tried all of solution above. Nothing changed.
I’ve done a clean and new installation, but ‘watch’ not work.

Browserify show in the top right corner the new file compiled , but the page is not update.

I have the same problem as @MaxSwinkels but with sage@9.0.0-beta.1 and Bedrock 1.7.3.
node -v : v7.4.0 (latest as of date)
npm -v : 4.0.5 (latest as of date)
webpack 2.2.0-rc.4 (from npm install through sage theme)

npm run build works as expected
npm run start runs as if there are no errors but doesn’t apply main.css or .js (they are 404)

My problem is: BrowserSync detects changes in .php-, .scss- and .js-files but only applies/compiles .php-files. Not the .css/.scss or .js-files.

My config.json at /app/themes/myers-surf/assets/config.json I have changed to this:

"publicPath": "/app/themes/myers-surf",
"devUrl": "http://myerssurfboards.dev",
"proxyUrl": "http://localhost:3000",

I have tirelessly altered port number, publicPath and proxyUrl in hope to find the problem but with no luck. The path http://localhost:3000/app/themes/myers-surf/assets/styles/main.scss returns the expected file at that path so it shouldn’t be faulty.
Also, npm run start doesn’t output a /dist folder at all. It actually removes the /dist that npm run build created. I figured out that it is CleanPlugin in /assets/build/webpack.config.js that removes it if that is any help (does not solve my problem btw).

Any help is greatly appreciated!

See this thread for discussion and possible fixes for this issue.

1 Like