scss - import not removed from bundle

[DaveO-Home]

❔ Question

Using import "./scss/index.scss"; bundle has require("./scss/index.scss"); and when the bundle is loaded expects the file to exist on the server. The css has already been produced and is loaded properly. So, why does the ".scss" file have to be visible?

🔦 Context

Using gulp to build -
const options = {
production: isProduction,
outDir: '../' + dist,
contentHash: false,
outFile: isProduction ? 'index.html' : 'index_dev.html',
publicUrl: watch ? '' : './',
watch: watch,
cache: !isProduction,
cacheDir: '.cache',
minify: isProduction,
target: 'browser',
https: false,
logLevel: 3,
sourceMaps: !isProduction,
detailedReport: isProduction
};

Must provide .scss file on production server

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	10.15.3
npm/Yarn	6.9
Operating System	Fedora 30

[mischnic]

The JS bundle says require("./scss/index.scss"); but it really only loads the css file and if I read your post correctly, that works correctly.

Your issue is that the JS bundle still contains .scss? Why is this a problem?
Or are you asking why the require call is needed at all?

[DaveO-Home]

It also attempts to load the .scss file, that is the problem. I have to deploy an empty index.scss to the server.

[mischnic]

It also attempts to load the .scss file, that is the problem.

Could you create a minimal example when this happens?

[DaveO-Home]

@mischnic Ok, it does work. However, I'm using parceljs to build a library. Then in an app I use Browserify to build. Apparently, browserify interprets the 'require' as commonjs?.... Close if parcel does not support something like this.

[mischnic]

Apparently, browserify interprets the 'require' as commonjs?.... Close if parcel does not support something like this.

Webpack and browserify both think the require that. Here's a similar issue: #2883

The library you built with parcel contains a line like this (for a non minified bundle parcel build --no-minify src/index.js:

var nodeRequire = typeof require === 'function' && require;

Could you try replacing that with

var nodeRequire = null;

and testing how browserify behaves then?

[DaveO-Home]

@mischnic - var nodeRequire = null does not work. However, if I delete the line;
require("../scss/index.scss");
it works perfectly.

[mischnic]

Ok, I'll have to investigate how we can make webpack and browserify ignore the requires emitted by parcel...

I'll close this issue because it's caused by the same underlying problem as #2883

[mischnic]

Note, I strongly advise not using Parcel's feature of importing style in a library. Reasons:

1. The bundler of the end user doesn't know that the style file is needed at runtime
2. (more importantly) Might be surprising to see a css file being loaded all of the sudden

[DaveO-Home]

@mischnic - Yes I did that as my work around. Works fine. There is one other issue with using Parcel to build a library. The bundle scopes parcelRequire=function to window. This does not work with "Rollup". I changed it to var parcelRequire=function without any side effects. Works in all tested bundlers.