question-mark
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.

Changing `scss`/`css` file breaks style on livereload

See original GitHub issue

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

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

The project I’m working is available here, you can checkout and reproduce the issue on it.

.babelrc:

{
  "presets": ["env", "preact"],
  "plugins": [
    "transform-function-bind",
    ["transform-react-jsx", { "pragma": "h" }],
    ["module-resolver", {
      "root": ["."],
      "alias": {
        "@app": "./src"
      }
    }],
    "transform-object-rest-spread"
  ]
}

.postcssrc:

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

🤔 Expected Behavior

Changing a scss file with css modules enabled that is “named-imported” (import s from './style.scss') in js and used in className by preact/react/etc should update the js that requires it providing the new className variable to it, without needing a manual full page reload.

😯 Current Behavior

Changing the scss updates the stylesheet causing the network fetch for the new asset but not for the js file, so all styles changed breaks on the page since the old classes doesn’t exist anymore, to see the changes a manual full page reload is needed.

💁 Possible Solution

I really don’t have a clue about this… Sorry…

🔦 Context

For example going into src/home/home.scss and changing .Title color will reproduce the bug (as of commit 451f3a2)

💻 Code Sample

You can see the open sourced project here (https://github.com/wescoder/tavern)

🌍 Your Environment

Software Version(s)
Parcel ^1.4.1
Node v9.2.0
npm/Yarn 1.3.2
Operating System Linux Deepin 15.5 (Ubuntu based)

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:11
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

8reactions
dmsvlkscommented, Feb 5, 2018

Same problem for me when using CSS modules with HMR. This is the only thing that keeps me from using parcel for new projects.

6reactions
BipinBhandaricommented, Apr 29, 2018

I was able to get fix this by setting this on .postcssrc

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    },
    "postcss-modules": {
      "generateScopedName": "[name]_[local]_[hash:base64:5]"
    }
  }
}

from https://github.com/parcel-bundler/parcel/issues/809#issuecomment-385250361

Read more comments on GitHub >

github_iconTop Results From Across the Web

sass - Livereload on Rails not showing SCSS changes
I'm having the same issue -- I think it's because Guard only watches for CSS changes, but the CSS isn't compiled until a...
Read more >
Styling - Remix
Changes to the styles don't break the cache for the JavaScript. Therefore, CSS support in Remix boils down to one thing: it needs...
Read more >
SCSS changes are not getting compiled except in 1 file - Help
I am using live reload, and can verify it's working as it relates to changes to my JavaScript, HTML, Liquid, and 1 SCSS...
Read more >
Lightning-Fast Sass Reloading in Rails | mattbrictson.com
Imagine you are editing an SCSS file in your Rails application. ... By “style injection”, I mean being able to see styling changes...
Read more >
The Beginner's Guide to Sass - freeCodeCamp
Sass works in such a way that when you write your styles in a .scss file, it gets compiled into a regular CSS...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

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

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found