search

samrith-s / parcel-plugin-structurize

A plugin to customize the output (dist) directory structure during production.
MIT License
41 stars 6 forks source link

CSS path in index.html is not set correctly (missing directory) #46

Closed SC-JBG closed 3 years ago

SC-JBG commented 3 years ago

Hi there,

I am facing an issue when running "parcel build". Apparently the paths required to correctly reference CSS stylesheets are not set correctly within the html file.

Means, if I run

parcel build src/index.html

with the following config added to my package.json

  "devDependencies": {
    "parcel-bundler": "^1.12.5",
    "parcel-plugin-clean-dist": "^0.0.6",
    "parcel-plugin-structurize": "^2.4.4",
    "sass": "^1.34.0"
  },
"parcel-plugin-structurize": {
  "verbose": true,
  "displayAssetsMap": true,
  "rules": [
    {
      "match": "*.{css,css.map}",
      "folder": "css"
    },
    {
      "match": "*.{js,js.map}",
      "folder": "js"
    },
    {
      "match": "*.{png,svg,jpg,jpg2,jpeg,gif,bmp,webm,webp}",
      "folder": "img"
    }
  ]
}

I expect my index.html to be rendered with the following references to .css and .js

<link rel="stylesheet" href="/css/main.bb27b9fc.css">
...
<script src="/js/main.95ec2e8c.js"></script>

instead I am getting the following generated, JS looks fine but CSS is not referenced correctly (missing the css/ folder)

<link rel="stylesheet" href="/main.bb27b9fc.css">
...
<script src="/js/main.95ec2e8c.js"></script>

My output from the build command looks like this

npm run build-prod

> main-app@1.0.0 build-prod
> parcel build src/index.html

⠋ Building...

✨  Built in 2.36s.

dist/main.95ec2e8c.js         1.24 KB    2.00s
dist/main.bb27b9fc.css.map      969 B      2ms
dist/main.95ec2e8c.js.map       875 B      0ms
dist/index.html                     786 B      8ms
dist/main.bb27b9fc.css          754 B    1.71s

  parcel-plugin-structurize
  Config: [AbsolutePathToProject]/package.json

  Assets Map:
  {
  '/index.html': {
    source: '[AbsolutePathToProject]/dist/index.html',
    destination: null,
    replacer: null,
    mapFile: false,
    dependents: [ '/main.95ec2e8c.js' ],
    config: undefined
  },
  '/main.95ec2e8c.js': {
    source: '[AbsolutePathToProject]/dist/main.95ec2e8c.js',
    destination: '[AbsolutePathToProject]/dist/js/main.95ec2e8c.js',
    replacer: '/js/main.95ec2e8c.js',
    mapFile: false,
    dependents: [ '/main.95ec2e8c.js.map', '/main.bb27b9fc.css' ],
    config: { match: '*.{js,js.map}', folder: 'js' }
  },
  '/main.95ec2e8c.js.map': {
    source: '[AbsolutePathToProject]/dist/main.95ec2e8c.js.map',
    destination: '[AbsolutePathToProject]/dist/js/main.95ec2e8c.js.map',
    replacer: '/js/main.95ec2e8c.js.map',
    mapFile: true,
    dependents: null,
    config: { match: '*.{js,js.map}', folder: 'js' }
  },
  '/main.bb27b9fc.css': {
    source: '[AbsolutePathToProject]/dist/main.bb27b9fc.css',
    destination: '[AbsolutePathToProject]/dist/css/main.bb27b9fc.css',
    replacer: '/css/main.bb27b9fc.css',
    mapFile: false,
    dependents: [ '/main.bb27b9fc.css.map' ],
    config: { match: '*.{css,css.map}', folder: 'css' }
  },
  '/main.bb27b9fc.css.map': {
    source: '[AbsolutePathToProject]/dist/main.bb27b9fc.css.map',
    destination: '[AbsolutePathToProject]/dist/css/main.bb27b9fc.css.map',
    replacer: '/css/main.bb27b9fc.css.map',
    mapFile: true,
    dependents: null,
    config: { match: '*.{css,css.map}', folder: 'css' }
  }
}

  Structurization complete. Modified 4 files in 6ms

   - Moved 2 files to dist/js
   - Moved 2 files to dist/css

  If you loved the plugin, do consider starring the repository:
  https://github.com/samrith-s/parcel-plugin-structurize

  Think something could be improved? Create an issue on our repository:
  http://bit.ly/parcel-plugin-structurize-feature-request

Any idea how this happened? Am I doing something wrong here?

Thanks a lot and take care, best, Jules

samrith-s commented 3 years ago

Hey @SC-JBG :wave:,

Can you paste your HTML file which references the CSS file?

SC-JBG commented 3 years ago

Hey @samrith-s ,

thanks for getting back to me, please find the HTML file down below. I stripped out everything unnecessary to keep it readable, head and script tags are as generated:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello, world!</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="">
        <link rel="stylesheet" href="/main.bb27b9fc.css">
    </head>
    <body>
        <h1>Hello, world!</h1>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin=""></script>
        <script src="/js/main.95ec2e8c.js"></script> 
    </body>
</html>

As you can see, the css-file is missing the "css" folder in its path and therefore leads to a 404.

Thank you for having a look at it and take care, Jules

samrith-s commented 3 years ago

Hey @SC-JBG,

Thank you for that. I was actually asking for your entry file not the generated file.

That way, I can figure out what's happening!

samrith-s commented 3 years ago

Also, can you remove the .map files from the globs? There's a bit of a Gotcha around that. From the README:

You should NOT add any structurizer rules for .map files as the plugin automatically resolves and restructures the sourcemap files to reside in the same directory as its parent. This can cause unintended side-effects.

SC-JBG commented 3 years ago

Hi @samrith-s ,

Oh, sorry, my bad.

Here is the original index.html that is my entry point:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hello, world!</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
    <h1>Hello, world!</h1>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="js/main.js"></script>
</body>
</html>

And main.js content is just importing my SASS stylesheet:

import "../scss/main.scss";

I have now removed *.map from the globs but without any change in behaviour.

Thank you and best, Jules

SC-JBG commented 3 years ago

Alright, that was kinda help for self-help. I recognized that I loaded my SCSS via JS - hence Parcel is generating a css file from it but still tries to load the SCSS via a javascript-sass-loader through the entry JS file - but as there is no SCSS folder available in my dist directory and I never copy over my SCSS files there is nothing to render. If I manually copy my SCSS sources over to dist, the style is loading as expected with the JS file but that is not the automated behaviour I was expecting. So here is my solution that works for me now:

If I remove the SCSS import from my entry point JS file and instead load the SCSS file directly in a link tag within my entry point HTML file, the SCSS-to-CSS generation is correct, paths are looking good and everything runs as expected.

So my solution is to simply load SCSS in entry HTML like this:

<link href="scss/crowdany.scss" rel="stylesheet">

instead of loading it through my entry point JS file via import:

import "../scss/main.scss";

which is a valid option according to https://parceljs.org/scss.html#usage. If you want to still load your SCSS stylesheets via JS you have to copy over your SCSS directory with all sources to the DIST folder via command or however you like in order to work properly.

I am just starting off with Parcel, I think that is simply my fault here not fully understanding how to work with Parcel and SASS. Hope that helps and probably saves you also some time.

Thank you for helping me out and take care, Jules

samrith-s commented 3 years ago

Hey @SC-JBG , I am looking into this. Hopefully should have something concrete by tomorrow. :smile:

But before I dive into it, could you show me a the list of plugins you are using? Maybe something is interfering with this plugin (will help debug)/

SC-JBG commented 3 years ago

Hey @samrith-s ,

wow you are fast mate :-)

Here are my dependencies, its pretty vanilla actually except for one plugin that I have loaded but actually don't really use anywhere:

"devDependencies": {
    "parcel-bundler": "^1.12.5",
    "parcel-plugin-clean-dist": "^0.0.6",
    "parcel-plugin-structurize": "^2.4.4",
    "sass": "^1.34.0"
  }
stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.