Parcel: Frontpage minimal example not working as expected
馃悰 bug report
I tried to reproduce the minimal example on the homepage, but the console.log to log the css from the main class. Instead it logs undefined.
馃帥 Configuration
From the homepage:
index.html
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
index.js
// import another component
import main from './main';
main();
main.js
// import a CSS module
import classes from './main.css';
export default () => {
console.log(classes.main);
};
main.css
.main {
/* Reference an image file */
/* background: url('./images/background.png'); */
color: red;
}
Then using the npm script "start": "parcel index.html" to start the web server.
馃 Expected Behavior
I would expect the console.log to show the contents of the main css class.
馃槸 Current Behavior
Console.log shows undefined instead.
This also happens when I create a production build, when I switch to the latest Node version and when I use Firefox..
Maybe I am doing something wrong, am I missing a dependency?
馃實 Your Environment
| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.7
| Node | v8.11.4
| npm/Yarn | 5.6.0
| Operating System | OSX
vnglst
All 3 comments
You have to enable modules in postcss config. As documented: https://parceljs.org/transforms.html#postcss
It should probably not use css modules on the getting started guide
DeMoorJasper
on 16 Aug 2018
Ah yes, now it works! Thanks.
I agree that ideally the example on the frontpage should require little of no further configuration.
vnglst
on 16 Aug 2018
Glad I could help. Feel free to contribute back to the docs with a sidenote or updated example :)
DeMoorJasper
on 17 Aug 2018
Related issues
algebraic-brain
路
3Comments
medhatdawoud
路
3Comments
philipodev
路
3Comments
oliger
路
3Comments
jzimmek
路
3Comments
Most helpful comment
You have to enable modules in postcss config. As documented: https://parceljs.org/transforms.html#postcss
It should probably not use css modules on the getting started guide