Issue in loading semantic-ui-css with css-loader 6

Question

On trying to load semantic-ui-css with css-loader 6 I get the following error:

 failed: UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;base64,...

It looks like the 2nd semi-colon after utf-8 is causing the issue. After removing the 2nd semi-colon there are no compilation errors, but semantic-ui icons stop working.

However, downgrading css-loader to 5.2.7 resolved the issue. Is there a better way to solve this problem?

Answer 1

The error is likely to caused by double semicolons in semantic.min.css

Temporary (but not quite good) solution: add sed -i 's/;;/;/g' node_modules/semantic-ui-css/semantic.min.css && in front of your start/build script in package.json and if you have a Darwin OS you have to put sed -i '' 's/;;/;/g' node_modules/semantic-ui-css/semantic.css && in front. You can also write a simple shell script that does the job:

CHECK_OS="`uname -s`"
if [[ "$CHECK_OS" = "Darwin" ]]; then
    sed -i '' 's/;;/;/g' node_modules/semantic-ui-css/semantic.min.css
    sed -i '' 's/;;/;/g' node_modules/semantic-ui-css/semantic.css
else 
    sed -i 's/;;/;/g' node_modules/semantic-ui-css/semantic.min.css
    sed -i 's/;;/;/g' node_modules/semantic-ui-css/semantic.css
fi