Yarn watch not generating styles directory

sage
1

Hi All,

Just setup the latest sage 9 (beta 2 ). Whenever i run “yarn run start”, it seems that the styles are not being compiled. I see no errors, but in the “dist” folder I only see the “vendor” and “scripts” folder, but not the “styles” folder.

However, when running “yarn run build” the styles folder generates fine.

I’ll spend some time looking into the build scripts, but if anyone have any insights into this that’ll be awesome, thanks.

1 Like
2

During the Browsersync session nothing is referenced from dist, it’s all in the memory. 404s on assets are expected from the BS session.

If you’re unable to see styles being changed, can you make sure you’ve configured assets/config.json correctly? See https://github.com/roots/sage#using-browsersync

1 Like
3

Thanks for that Ben, good to know! Styles are updating fine now, thanks again for helping.

1 Like
4

Hi there. Is there any way to force dist/styles directory to be created while watching? For some reason I need production files to be written and I’d like to avoid running yarn build:production each time I make a change. I tried some tweaks in webpack configuration files but I’m new to it and couldn’t figure it out… Thanks.

5

Finally found a pretty dirty workaround: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/30#issuecomment-256958209

First remove this line in webpack config: https://github.com/roots/sage/blob/master/assets/build/webpack.config.js#L130

Then add somewhere in your main.js:

if (process.env.NODE_ENV !== 'production') {
  if (module.hot) {
    const reporter = window.__webpack_hot_middleware_reporter__;
    const success = reporter.success;
    reporter.success = function () {
      document.querySelectorAll('link[href][rel=stylesheet]').forEach((link) => {
        const nextStyleHref = link.href.replace(/(\?\d+)?$/, `?${Date.now()}`);
        link.href = nextStyleHref;
      });
      success();
    };
  }
}

Hope someone will find a better way to handle it :slight_smile:

6

@nicooprat Try this: https://github.com/gajus/write-file-webpack-plugin/

7

Thanks @QWp6t , I already stumbled upon this, but it’s only for webpack-dev-server: “This plugin has no effect when webpack program is used instead of webpack-dev-server.”. Unfortunately Sage uses BrowserSync as its server, so it’s not applicable here as I understand it.

Edit: Ok, so my hack above stopped working a few days ago for no apparent reason. After a lot of struggles, I finally tried the WriteFileWebpackPlugin. Works like a charm! (with a few hacks, see in Github below). Turns out I misunderstood how Sage watch mode works. It’s using browsersync-webpack-plugin (different from browser-sync-webpack-plugin!), which internally actually uses webpack-dev-server, so my idea above was false. Phew, that’s a pretty hard first time with Webpack for me :slight_smile: Thanks again.

More info in this Github issue comment

8

Sorry to re-open this thread but I am having the same issue, I notice when you yarn build or yarn build:production creates the /dist directory, however when running yarn start run it is not creating the /dist directory at all.

No errors on yarn build or yarn build:production.

I have had yarn run start create the /dist folder a few times but not often it works first time. I just keep trying and have eventually just seen it work after numerous attempts. The devUrl I can access as normal, but of course there is still no /dist folder to render styling from.

Sage version in use: Sage 9

10

@JordanC26 It’s the way it’s meant to work. CSS is more or less in RAM and injected in the page by Webpack (only in dev). So you’ll have to hack it to force Webpack to generate a file at this moment. Did you try the solution proposed in my latest comment?