Render fails for SCSS file encoded in UTF8-BOM

[Indigo744]

Hello,

I am trying to make this lib works in my webpack config file, without any success.

If I do

const sass = require('node-sass');
const renderedSass = sass.renderSync({ file: "file.scss" });
console.log(renderedSass);

It works, and I get:

{ stats:
   { entry: ...,
     start: 1543849333359,
     includedFiles: [... ],
     end: 1543849333363,
     duration: 4 },
  css:
   <Buffer 40 ... 738 more bytes> }

However, if I do:

const sassExtract = require('sass-extract');
const renderedSass = sassExtract.renderSync({ file: "file.scss" });
console.log(renderedSass);

It does not work:

× ｢config｣: An error occurred while trying to load .\webpack.config.prod.js
              Did you forget to specify a --require?
.\node_modules\@webpack-contrib\config-loader\lib\LoadConfigError.js:7
    const stack = error.stack.split('\n').slice(1);
                              ^

TypeError: Cannot read property 'split' of undefined
    at new LoadConfigError (.\node_modules\@webpack-contrib\config-loader\lib\LoadConfigError.js:7:31)
    at module.exports (.\node_modules\@webpack-contrib\config-loader\lib\load.js:85:11)
    at module.exports (.\node_modules\@webpack-contrib\config-loader\lib\index.js:14:15)
    at load (.\node_modules\webpack-command\lib\config.js:55:12)
    at module.exports (.\node_modules\webpack-command\lib\index.js:45:10)
    at run (.\node_modules\webpack-command\lib\cli.js:116:5)
    at Object.<anonymous> (.\node_modules\webpack-command\lib\cli.js:19:3)
    at Module._compile (internal/modules/cjs/loader.js:707:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
    at Module.load (internal/modules/cjs/loader.js:605:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
    at Function.Module._load (internal/modules/cjs/loader.js:536:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:760:12)
    at startup (internal/bootstrap/node.js:303:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:872:3)

What I tried

1. Removing node_modules + node-cache and doing a fresh npm install
2. Rebuilding node-sass: npm rebuild node-sass --force
3. Using render instead of renderSync
4. Requiring node-sass before sass-extract

Environment

• Win10 x64
• npm version: 6.4.1
• node version : v11.0.0
• node-sass package version: 4.10.0
• sass-extract package version: 2.1.0

Thanks for your help.

[Indigo744]

Ok I understand what was the issue.

TL/DR

SCSS file was encoded in UTF8-BOM. Switching to UTF8 (without BOM) resolved the issue.

Explanation

I created a single js file containing only the following line:

const sassExtract = require('sass-extract');
const renderedSass = sassExtract.renderSync({ file: "file.scss" });
console.log(renderedSass);

And I ran it with node test.js (instead of doing it through webpack).
It allowed me to get the real error:

.\node_modules\gonzales-pe\lib\gonzales.js:812
            throw new ParsingError(e, css);
            ^
Parsing error: Please check validity of the block starting from line #1

After fiddling with my scss file, I discover that it was stored in UTF8 with a BOM (a byte-order mask).
It seems that the Gonzales lib is choking on this byte.

Removing the BOM (i.e. storing as UTF8 only) resolve the issue.

Workaround

Workaround 1 : remove BOM of SCSS file

Workaround 2: read file with fs, remove BOM and pass it directly to the lib:

const sassExtract = require('sass-extract');
const renderedSass = sassExtract.renderSync({
    data: fs.readFileSync("file.scss", 'utf-8').replace(/^\uFEFF/, '')
});
console.log(renderedSass);

Solution taken from nodejs/node-v0.x-archive/issues/1918

Fix

I think the issue lies in the sass-extract library. Gonzales API expects a string.
The BOM is not part of the text. It is part of a file specification to identify an UTF8 encoded file.

Sass-extract should strip any BOM before passing it to the parser.