Parcel: Saving scss partial does not trigger update

Created on 21 May 2018  路  2Comments  路  Source: parcel-bundler/parcel

馃悰 bug report

Editing and saving a scss partial does not properly trigger updates to the live build, requiring manual save of the root scss file.

馃帥 Configuration (.babelrc, package.json, cli command)

.babelrc

{
  "presets": ["env"]
}

package.json

{
  "name": "ycharts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "node-sass": "^4.9.0",
    "parcel-bundler": "^1.8.1"
  },
  "dependencies": {}
}

馃 Expected Behavior

Editing and saving a scss partial (dependency) should trigger a rebuild and update the development server.

馃敠 Context

I'm trying out Parcel with a very basic setup, mostly just following the documentation. Its quite annoying to make a change in a scss partial thats being imported into a main scss file, to then have to crtl + s on my index.scss to see the updates.

馃捇 Code Sample

Really basic setup. index.scss imports some other scss partials, and index.js imports index.scss, I have no module reference errors and the code does work, its just the files that are being watched during development could be expanded.

index.html

<!doctype html>

<html lang="en">
<head>
<!-- Stuff -->
</head>

<body>

  <script src="scripts/index.js"></script>
</body>
</html>

index.js

import '../scss/index.scss';

// stuff...

index.scss

@import 'variables';
@import 'typography';
@import 'ui';

body {
    background-color: $dark;
}

馃實 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.8.2
| Node | 8.9.3
| npm/Yarn | 6.0.1
| Operating System | win10 64bit

Bug
Source
picture HauntedSmores
👍1

Most helpful comment

@import 'variables';
@import 'typography';
@import 'ui';

Should probably be

@import './variables';
@import './typography';
@import './ui';
picture DeMoorJasper on 21 May 2018
🎉1 👍1

All 2 comments

@import 'variables';
@import 'typography';
@import 'ui';

Should probably be

@import './variables';
@import './typography';
@import './ui';
DeMoorJasper picture DeMoorJasper on 21 May 2018
🎉1 👍1

@DeMoorJasper This fixed the issue. I'm told theres a PR for this, but the idea would be to use standard sass syntax for partials.

_my-partial.scss Using underscore prefix for partials

@import 'mypartial' Using partial syntax (May need to implement ~ syntax to accommodate node_modules.

Current way to achieve proper HMR is to simply use straight files and import syntax.

my-partial.scss

@import './my-partial.scss'

HauntedSmores picture HauntedSmores on 21 May 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

medhatdawoud picture medhatdawoud  路  3Comments
philipodev picture philipodev  路  3Comments
will-stone picture will-stone  路  3Comments
mnn picture mnn  路  3Comments
adamreisnz picture adamreisnz  路  3Comments