Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Owaiz_Yusufi's avatar

Build CSS and JS with the same name but in different folders is been replaced by Vite

So, I have two SCSS files with the same name but inside the different locations

For example:

// inside resources

    scss                ---> Folder contains LTR files
      |
      |- a.scss
      |- b.scss
      |- c.scss

    scss-rtl            ---> Folder contains RTL files
      |
      |- a.scss
      |- b.scss
      |- c.scss

so the problem is whenever I run npm run build

it generates build files but overwrites my previous files

for example :

// inside public

build

    assets                ---> overwrites LTR to RTL files
      |
      |- a.[hash].scss
      |- b.[hash].scss
      |- c.[hash].scss

Also,

It shows the following message

The emitted file "assets/a.c4aecca9.css" overwrites a previously emitted file of the same name.

Now, I know the file name is same but the folder are different so I think that it should create RTL files hash differently by default.

0 likes
26 replies
Owaiz_Yusufi's avatar

Well I have also tried this

build: {
        rollupOptions: {
            output: {
                entryFileNames: `[name]` + hash + `.js`,
                chunkFileNames: `[name]` + hash + `.js`,
                assetFileNames: `[name]` + hash + `.[ext]`
            }
      }
}

But no luck :(

Sinnbeck's avatar

@Owaiz_Yusufi Maybe you can add a link to a minimal reproducible repo on github of the problem? But this sounds like a vite issue, so perhaps you can see if there is a vite help forum that might know the issue :)

Owaiz_Yusufi's avatar

@Sinnbeck Ok here is the update

I have create a new project in order to replicate the issue but, it seems to work fine

So, my concern is that

If the issue is related to Laravel version as I have updated the original project from Laravel 9.33.0 to 9.36.4

Owaiz_Yusufi's avatar

@Sinnbeck

New project package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.6.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.0.0"
    },
    "dependencies": {
        "sass": "^1.55.0"
    }
}

Old project package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^0.27",
        "laravel-vite-plugin": "^0.6.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.0.0"
    },
    "dependencies": {
        "bootstrap": "^5.2.1",
        "sass": "^1.55.0"
    }
}
Sinnbeck's avatar

@Owaiz_Yusufi Well its hard to help much if you cannot recreate it. Maybe try npm update on the old project in case it is behind

Owaiz_Yusufi's avatar

@Sinnbeck Hmmm. So, I am on my own .

Personally I am thinking to try some things

  • Like you suggested to run npm update
  • To debug my vite.config.js and last but, not the least,
  • To create a new project and migrate my whole project inside that

Do you suggest something else that I can do ?

Owaiz_Yusufi's avatar

@Sinnbeck Tried npm run upgrade it did not work as well.

So, I am debugging my vite.config.js file

Sinnbeck's avatar

@Owaiz_Yusufi Yeah it should be vite/js related, so maybe copy over all the files related to that from the working project ? :)

Owaiz_Yusufi's avatar

@Sinnbeck Ok, Ahhhh!

I know it might sound weird but I am pretty much sure that I have found the issue, i.e. VITE overwrites the files which contains exact same code

For example

If we have a.scss file and it contains exact same code for LTR and RTL ( Remember light and dark code is not comman ) it will overwrite the RTL or LTR file ( as it totally depends. At which position you are calling your SCSS files inside vite.config.js file )

    scss                ---> Folder contains LTR files
        |- light
            |
            |- a.scss 
        |- dark
            |
            |- a.scss

    scss-rtl                ---> Folder contains RTL files
        |- light
            |
            |- a.scss 
        |- dark
            |
            |- a.scss
1 like
Owaiz_Yusufi's avatar

@Sinnbeck seriously! that is an issue 🤦‍♂️ and you are share it now 😂.

Wish you have suggested me before 😂🤣

Got my head explode

Well at the last, thank you for assisting me

Please or to participate in this conversation.