Parcel

When building with .env files for distinct environments, the default cache setting will not let you insert environment variables dynamically. Caching gets in the way and the ES5 minified bundle does not get regenerated.

To solve the issue, add a distinct cache directory when building bundles based on environment.

e.g.

NODE_ENV=dev  parcel build [entry-point] --cache-dir=.cache/dev
NODE_ENV=uat  parcel build [entry-point] --cache-dir=.cache/uat
NODE_ENV=prod parcel build [entry-point] --cache-dir=.cache/prod

If you want to import a sass file from a library in node_modules, like so:

@import "@material/top-app-bar"

For Parcel and Sass to understand how to read this import, create a .sassrc.js file in the root React app directory.

Add the following code into it:

const path = require('path')

const CWD = process.cwd()

module.exports = {
  "includePaths": [
    path.resolve(CWD, 'node_modules'),
    path.resolve(CWD, 'src')
  ]
}

To run it safely, run it with the --no-cache option:

parcel [entry-point] --no-cache