Hi there, after scratching my head for awhile today to figure out why the hot reload was no longer working when I made changes to a scss file, I realized that my problems vanished when I set development to false and not have my folders structured while developing.
The styles do update however, if I save my entry file (index.html) in this case.
I am simply including the scss file in the index.html via tag.
Here are my configurations. Note that in this case, everything works as intended. However, if I change the options.development to true in the package.json file, then SCSS hot reloading no longer works.
{
"name": "example",
"version": "1.0.0",
"description": "Example",
"scripts": {
"start": "parcel ./src/index.html --out-dir build/dev",
"build": "parcel build ./src/index.html --out-dir build/prod"
},
"author": "Chuck Taylor",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"cssnano": "^4.1.10",
"parcel-plugin-custom-dist-structure": "^1.1.3",
"parcel-plugin-nuke-dist": "^1.0.1",
"sass": "^1.26.3",
"typescript": "^3.8.3"
},
"customDistStructure": {
"config": {
"scripts": [
".js",
".js.map"
],
"styles": [
".css",
".css.map"
],
"images": [
".jpg",
".png",
".svg"
]
},
"options": {
"development": false
}
},
"dependencies": {}
}
# Supported Browsers
defaults
{
"presets": ["@babel/preset-env"]
}
module.exports = {
plugins: [require('autoprefixer'), require('postcss-nested')],
}