Parcel: CSS not applied when imported in JS and JS is the entry point

Created on 1 Mar 2018 · 2Comments · Source: parcel-bundler/parcel

Choose one: is this a 🐛 bug report or 🙋 feature request?
🐛 bug report

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

I do not have a .bablerc

package.json

{
  "name": "usr",
  "version": "1.0.0",
  "description": "User Self Registration",
  "main": "index.js",
  "repository": "",
  "author": "Lawrence Ismail",
  "license": "MIT",
  "scripts": {
    "watch": "parcel watch src\\main\\js\\index.js -d src\\main\\resources\\static\\bundled --no-cache",
    "build": "parcel build src\\main\\js\\index.js -d src\\main\\resources\\static\\bundled",
    "build-prod": "parcel build src\\main\\js\\index.js -d src\\main\\resources\\static\\bundled --no-cache"
  },
  "dependencies": {
    "node-sass": "^4.7.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "parcel-bundler": "^1.6.1"
  }
}

Command:
yarn run build

index.js src/main/js:

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';

class Usr extends React.Component{
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <h1>Hello, world. What's up with you?</h1>
            </div>
        );
    }
}
ReactDOM.render(
    <Usr/>,
    document.getElementById('root')
);

index.css src/main/js/:

body {background-color: cornflowerblue;}
h1 {color: rebeccapurple}

test.html (located in the bundled dir):

<!DOCTYPE HTML>
<html>
<body>
  <div id="root"></div>
  <script src="index.js"></script>
</body>
</html>

🤔 Expected Behavior

I would expect the css to get bundled with the js and be applied to the page without needing to have the stylesheet specifically imported in the html.

😯 Current Behavior

When I run parcel build src\main\js\index.js -d src\main\resources\static\bundled --no-cache and then open the test.html in my browser my React code is working and the "Hello world" message is shown. However, the css is not applied as expected. There are no errors in the console.

💁 Possible Solution

🔦 Context

I would like for this to work so that I only have to include js file in my main html. I would prefer to not have to process my main html page through Parcel. This would make working with Thymeleaf templates in SpringBoot much simpler.

💻 Code Sample

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.6.2
| Node | v6.11.5
| Yarn | v1.5.1
| Operating System | Win 7

Source

ljismail0

👍1

Most helpful comment

Is there no way around including a '' tag and not having the HTML file as the entry point? I believe you can do that with Webpack and css-loader.

ljismail0 on 1 Mar 2018

👍6

All 2 comments

You'll need to put a <link> tag in your HTML to import the CSS. Or set the entry point to an HTML file and import the JS and parcel will do this for you.