Manish
Manish

Reputation: 1972

Building files in nested folder in parcel js

I am using parcel js to bundle a simple web application. My project structure looks like this:

package.json
index.html
contact-us.html
/css
 main.css
/projects
  project-evergreen.html

package.json looks like this:

{
 
  "scripts": {
    "dev": "parcel index.html contact-us.html projects/project-evergreen.html",
    "build": "parcel build index.html contact-us.html projects/project-evergreen.html",
  },
  "name": "demo-website",
  "version": "1.0.0",
  "license": "MIT",
  "devDependencies": {
    "parcel-bundler": "^1.12.5",
    "sass": "^1.22.7",
    "parcel-plugin-static-files-copy": "^2.6.0"
  },
  "dependencies": {
    "express": "^4.17.1",
    "jquery": "^3.6.0"
  },
  "staticFiles": {
    "staticPath": [
        {
            "staticPath": "img",
            "staticOutDir": "img"
        }
    ]
  }
}

I am loading resource files in html files as:

index.html

<link rel="stylesheet" href="/css/main.css" />

/projects/project-evergreen.html

<link rel="stylesheet" href="/css/main.css" />

I am running yarn build to build this project.

In this setup while index.html file is getting build fine but while building "projects/project-evergreen.html" I am getting this error:

/Users/manish/Projects/demo-website/projects/css/main.css:undefined:undefined: ENOENT: no such file or directory, open '/Users/manish/Projects/demo-website/projects/css/main.css'

I am not sure how to configure parcel for this use case. I have already seen all the documentation but unable to find how to tell parcel to search for css file from project root not from the path where html file is present.

Upvotes: 4

Views: 1485

Answers (1)

Dalir Bajelani
Dalir Bajelani

Reputation: 1

"scripts": {
    "dev": "parcel src/**.html",
    "prebuild": "npx rimraf build",
    "build": "parcel build --public-url ./ src/**.html --no-optimize --dist-dir build"
}

in above examble my codes are in "src" folder, you can change it.

Upvotes: 0

Related Questions