Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Shared js file and missing style link

See original GitHub issue

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

package.json

"scripts": {
    "dev": "node build.js",
    "build": "node build.js"
}

build.js

const rimraf = require('rimraf');
const Bundler = require('parcel-bundler');
const Path = require('path');

rimraf(Path.join(__dirname, './dist') , () => {
    console.log('Removed dist folder');
});

if (process.env.NODE_ENV === 'production') {
    rimraf(Path.join(__dirname, './.cache') , () => {
        console.log('Removed cache folder');
    });
}

const entryFiles = [
    Path.join(__dirname, './src/index.html'),
    Path.join(__dirname, './src/index2.html')
];

const bundler = new Bundler(entryFiles);
bundler.on('bundled', (bundle) => {
    console.log("Bundling done");
});
bundler.bundle();

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport" />
    <title></title>
</head>
<body>
    <script src="./index.js"></script>
    <h1>Index.html</h1>
</body>
</html>

src/index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport" />
    <title></title>
</head>
<body>
    <script src="./index.js"></script>
    <h1>Index2.html</h1>
</body>
</html>

src/index.js

import './index.css'

src/index.css

body {
    background-color: red;
}

🤔 Expected Behavior

The same css file should be linked to both dist/index.html dist/index2.html

😯 Current Behavior

dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport">
    <title></title>
<link rel="stylesheet" href="/src.e31bb0bc.css"></head>
<body>
    <script src="/src.e31bb0bc.js"></script>
    <h1>Index.html</h1>
</body>
</html>

dist/index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport">
    <title></title>
</head>
<body>
    <script src="/src.e31bb0bc.js"></script>
    <h1>Index2.html</h1>
</body>
</html>

The css file is lined only to index.html and not to index2.html

🌍 Your Environment

Software	Version(s)
Parcel	1.10.3
Node	11.3.0
npm/Yarn	npm 6.4.1
Operating System

Issue Analytics

State:
Created 5 years ago
Reactions:8
Comments:27 (6 by maintainers)

Top GitHub Comments

16reactions

azumbrunnencommented, Jul 8, 2020

how is it possible that such a foundational bug that prevents anyone from building multi-page sites hasen’t been solver in almost two years?

14reactions

maximelebretoncommented, Jul 27, 2019

any news?

Temp solution:

src/
├── pages/
│   ├── about.js
│   ├── about.html
│   ├── index.js
│   └── index.html
└── shared.js

src/shared.js

import "./styles.scss";
import "jquery/dist/jquery.slim.js";
import "bootstrap";

src/pages/about.js

import "../shared.js";

src/pages/about.html

<script src="about.js"></script>

src/pages/index.js

import "../shared.js";

src/pages/index.html

<script src="index.js"></script>

Top Results From Across the Web

CSS File isn't linking properly - Stack Overflow

Use full URL: http://yourwebsite.com/resources/css/styles.css Otherwise, check if you are in root folder (in browser) eg.

Link types: preload - HTML: HyperText Markup Language | MDN

Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of...

The Many Ways to Include CSS in JavaScript Applications

Option 1: A dang ol' stylesheet. We'll start off with what is a familiar approach: a dang ol' stylesheet. We absolutely are able...

how to link html & css file in a pc with no internet connection

i tried using but it does not connect html to css . > I am trying on a desktop with no internet connection....

Component styles - Angular

Using component styleslink. For every Angular component you write, you can define not only an HTML template, but also the CSS styles that...

Troubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.

Start Free

Top Related Reddit Thread

No results found

Top Related Tweet

No results found

Top Related Dev.to Post

No results found

Shared js file and missing style link

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

package.json

build.js

src/index.html

src/index2.html

src/index.js

src/index.css

🤔 Expected Behavior

The same css file should be linked to both dist/index.html dist/index2.html

😯 Current Behavior

dist/index.html

dist/index2.html

The css file is lined only to index.html and not to index2.html

🌍 Your Environment

Issue Analytics

Top GitHub Comments

Top Results From Across the Web

Top Related Medium Post

Top Related StackOverflow Question

Troubleshoot Live Code

Top Related Reddit Thread

Top Related Hackernoon Post

Top Related Tweet

Top Related Dev.to Post

Top Related Hashnode Post

Experimental Scope Hoisting and No Source Maps outputs Source Map

Error with dynamic images importing