CSS file not generated when running yarn:start

sage
1

Hi,

I’m new to Sage and trying to figure it out.
I’ve found out that some CSS blob is generated, but somehow this is cached very hard.
I’ve set me dev url to something like https://domain.dev and when I run the command there’s a site opened at localhost:3000.
Now I want to use my own domain for development but when I change something as simple as body{background-color:red;} to {background-color:blue} it takes about 5 minutes before the changes show up.
I’ve noticed that the dist/scripts directory does contain a js file, but there’s not directory for the styles.
When I run yarn:build, a dist/styles directory is created and it does contain a CSS file.

Is there a way to force the watch method to generate CSS files as well?

Kind regards,
Chris

2

Hi @ChrisRedButton,

That’s correct. yarn start injects your styles into the browser via JavaScript instead of compiling them into an actual CSS file. When you save a change to your SCSS files, it should show up in the browser almost instantly when you are viewing localhost:3000 (which is served by BrowserSync).

If you want to develop using your dev URL (like domain.dev), you will need to quit yarn start and manually run yarn build each time you change your styles or scripts. yarn start only works with the localhost:3000 URL.

3

Hi @mmirus,

Yeah I figured out that the build command will generate the CSS file. I was hoping that there was a way to make the yarn start command generate a css file as well. But if I understand you correctly it is not possible to make yarn start generate a CSS file?

4

Not as far as I know assuming you want to keep the live updates. If you don’t care about that and would be happy to just have it compile your assets whenever you save rather than inject them, then you could replace the start command with your own version.

You mentioned that the changes take a long time to show up–is that when you’re viewing localhost:3000 while running yarn start? That should be almost instantaneous.

1 Like
5

It works when using the localhost:3000 url. But it’s not really ideal for me to be using a different URL then the development url.
Could you please explain to me how I can implement my own watch command?

6

Out of curiosity, if it works, what makes it not ideal? That’s a pretty typical development process for modern sites and apps.

From a quick test, here’s how you could set things up the way you want.

Add a watch command in package.json:

"scripts": {
  "build": "webpack --progress --config resources/assets/build/webpack.config.js",
  "build:production": "webpack --env.production --progress --config resources/assets/build/webpack.config.js",
  "build:profile": "webpack --progress --profile --json --config resources/assets/build/webpack.config.js",
  "start": "webpack --hide-modules --watch --config resources/assets/build/webpack.config.js",
  "watch": "webpack --progress --watch --env.noBs --config resources/assets/build/webpack.config.js",
  "rmdist": "rimraf dist",
  "lint": "npm run -s lint:scripts && npm run -s lint:styles",
  "lint:scripts": "eslint resources/assets/scripts resources/assets/build",
  "lint:styles": "stylelint \"resources/assets/styles/**/*.{css,sass,scss,sss,less}\"",
  "test": "npm run -s lint"
},

Modify the value of enabled.watcher in resources/assets/build/config.js:

enabled: {
  sourceMaps: !isProduction,
  optimize: isProduction,
  cacheBusting: isProduction,
  watcher: !!argv.watch && !(argv.env && argv.env.noBs),
},

And then run yarn watch. You assets should be watched and recompiled each time you save them, and then you would need to reload your browser to see the changes.

Edit: updated this line above: watcher: !!argv.watch && !(argv.env && argv.env.noBs),

7

Having the live updates are fine with me, and in fact I like it that way. How would I make a script that will just build my css files. I’m using bootstrap. If I’m just doing some css only modification the theme in dev environment, I don’t want to run the whole build script at the end of the session. I just want to generate the new css file only. Which npm package builds the css? Is it the stylelint npm package? Let’s say I will call the new script “build:css”. I don’t need to watch it because I already have live updates. How would I make a script to just build css. Do I need to add another npm package for that or does stylelint npm package do it.

Thanks

8