parcel-plugin-custom-dist-structure: Multiple HTML pages cannot use the same css, image

There are multiple pages index.html and main.html, but the same css and image cannot be used together. Only the first one used can be displayed correctly

OS: Windows 10 Parcel version: ^1.12.4 Plugin version: ^1.1.10

package.json

{
  "name": "demo-parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": {
    "clean": "rm dist/index.js",
    "start": "parcel ./src/index.html ./src/main.html",
    "build": "parcel build ./src/index.html --public-url ./"
  },
  "customDistStructure": {
    "config": {
      "js": [
        ".js",
        ".js.map"
      ],
      "css": [
        ".css",
        ".css.map"
      ],
      "images": [
        ".jpg",
        ".png"
      ]
    },
    "options": {
      "development": true
    }
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "autoprefixer": "^9.7.6",
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-custom-dist-structure": "^1.1.10",
    "parcel-plugin-nuke-dist": "^1.0.1",
    "postcss-modules": "^2.0.0",
    "sass": "^1.26.5"
  }
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Empty project</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
    <div id="app">
      <div class="menu">
        <a href="./index.html" class="current">home</a>|
        <a href="./main.html">main</a>
      </div>
      <h1>home content</h1>
      <div class="pic"></div>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>

main.html

<!DOCTYPE html>
<html>
  <head>
    <title>Empty project</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./css/styles.css" />
  </head>
  <body>
    <div id="app">
      <div class="menu">
        <a href="./index.html">home</a>|
        <a href="./main.html" class="current">main</a>
      </div>
      <h1>main content</h1>
      <div class="pic"></div>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>

Preview：index.html Is normal and can be displayed

index

Preview：main.html Is normal and can be displayed

main

But switch to main.html, it will not display properly It seems that the css and images paths are not correct

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (10 by maintainers)

Commits related to this issue

FIX: Incorrect file paths Having more than 1 level of nested folders inside of the `dist` folder caused problems and links were wrong. This change introduces a patch for this as well as a big refact... — committed to VladimirMikulic/parcel-plugin-custom-dist-structure by VladimirMikulic 4 years ago
FIX: Incorrect file paths Having more than 1 level of nested folders inside of the `dist` folder caused problems and links were wrong. This change introduces a patch for this as well as a big refact... — committed to VladimirMikulic/parcel-plugin-custom-dist-structure by VladimirMikulic 4 years ago
FIX: Dependency Cycle Error The change was necessary because the plugin would crash on 2 files linking to each other and linking to the same files. (2 html files linking to each other and using the s... — committed to VladimirMikulic/parcel-plugin-custom-dist-structure by VladimirMikulic 4 years ago
FIX: Dependency Cycle Error The change was necessary because the plugin would crash on 2 files linking to each other and linking to the same files. (2 html files linking to each other and using the s... — committed to VladimirMikulic/parcel-plugin-custom-dist-structure by VladimirMikulic 4 years ago

Most upvoted comments

Hello @serhatyuna. Thank you for reporting the issue. Actually, it was a very a simple fix and by upgrading to v.1.1.16, you can take advantage of it. Enjoy!

VladimirMikulic on Aug 29, 2020

As I upgraded to v1.1.15, build command runs as expected. But when the plugin is activated in development, the dependency cycle error (mentioned at #issuecomment-628963414) still occurs. Since it still works in development without activating the plugin, there is no need to use it in development, at least in my case the problem is resolved. Actually, I wasn’t expecting a fast solution. Thank you so much @VladimirMikulic. Good luck with your future work! 🥳🙌🏽

serhatyuna on Aug 29, 2020

Thank you, @serhatyuna. I’ll troubleshoot the plugin and get back to you as soon as I identify the bug.

VladimirMikulic on Aug 29, 2020

Thank you. I sent you an invitation to the project.

serhatyuna on Aug 29, 2020

Thanks, @jedchang. I’ll fix it soon.

VladimirMikulic on May 26, 2020

Hi @VladimirMikulic , I put files on this repository, test-parcel-plugin Thank you

jedchang on May 18, 2020

The error message is as follows

15_x_15_08-55-51

jedchang on May 15, 2020

@jedchang v1.1.11 has been released! It includes this fix as well as some other fixes and performance improvements.

Enjoy 🚀

VladimirMikulic on May 13, 2020