Duplicated CSS

sage
1

Hi
I’ve some problems while running yarn start. If I check Chrome inspector I see my CSS duplicated (check the below screenshot) and this create many issues.

15

Also, I notice that after some auto-compile yarn doesn’t compile anymore and I need to launch yarn build

All of this is a lot annoyng and slow down my work.
Is there a solution?
Thanks

1 Like
2

When yarn stops building do you see any error messages in your terminal? Sometimes the build process will crash if an error is particularly egregious and needs to be started again.

3

No, there is no error in terminal

4

I see this also when I use yarn run start. I’ve always assumed this is fine or normal behaviour though.

I think the styles from the bottom bit of the screenshot are from your real stylesheet and the ones above are the ones that are injected on the fly as you save changes.

I’m not 100% on that so I’m sure someone could correct me if I’m wrong!

5

Yes I think so but it sucks, because if I remove a style the first css is updated removing it but in the second one it remains. This need to be resolved.

6

I would try a different browser to confirm whether this is a Sage issue or a Chrome issue. Can you give that a shot?

7

Tried now on Firefox and it’s the same:

14

42

8

You’ve highlighted the path to the css file for one of the copies, what’s the path to the other one? That long hash filename doesn’t look familiar; is it possible you have a plugin doing some caching or compiling of CSS?

9

Here is the path of the other css file
43

No, I don’t use any cache plugin (neither as frontend library nor as Wordpress plugin)

10

Please take the following steps:

  1. Delete your dist folder
  2. run yarn start

Let me know if the issue persists.

11

Hi, tried and terminal says:

yarn run v1.5.1

error An unexpected error occurred: "Command \"watch\" not found.".

info If you think this is a bug, please open a bug report with the information provided in "/Users/.../yarn-error.log".

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
12

Sorry, meant yarn start.

1 Like
13

Tried to delete dist and run yarn start.
The duplicated css file with long weird name is gone but in console I have this error:
main.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
that gone away if I run yarn build but then it’s back the duplicated css! :frowning:

14

Delete your dist directory again.

The error you reported while running start is normal and can be ignored.

15

Hi,
ok doing this, the compilation works and I have no duplicated css but without starting yarn build I have the library Masonry.js that doesn’t correctly work. After starting yarn build it works right.

16

What does “doesn’t correctly work” mean in this context? Is there an error message? Can you paste that error message here? How are you including masonry? We can’t help without information.

17

No errors but the grid items are not placed correctly, that is not as a mosaic but all of them are overlapped. After I resize the browser window they take place as a mosaic. This happens only if I don’t start yarn build

18

This sounds like a minor display issue with masonry and webpack. If resizing the window fixes it, then masonry is loaded and working. If you want to pursue the issue further you might look into contacting the masonry developers and ask about webpack compatibility.