use spec https://www.w3.org/TR/css-syntax-3/#url-unquoted-diagram to validate url before parse

[wmarques]

Reported in #883 .
I'm having an issue when trying to import bootstrap-sass on my project with css-loader. It works with css-loader v1.x.

• Operating System: MacOS
• Node Version: 10.15.2
• NPM Version: 6.4.1
• webpack Version: 4.16.4
• css-loader Version: 2.1.1

Expected Behavior

SCSS + CSS compiles correctly

Actual Behavior

ERROR in ./src/css/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unterminated string constant (5:133)
You may need an appropriate loader to handle this file type.
| var urlEscape = require("../../node_modules/css-loader/dist/runtime/url-escape.js");
| var ___CSS_LOADER_URL___0___ = urlEscape(require("bootstrap-sass/assets/fonts/bootstrapglyphicons-halflings-regular.eot\""));
> var ___CSS_LOADER_URL___1___ = urlEscape(require("bootstrap-sass/assets/fonts/bootstrapglyphicons-halflings-regular.eot") + "?#iefix"");
| var ___CSS_LOADER_URL___2___ = urlEscape(require("bootstrap-sass/assets/fonts/bootstrapglyphicons-halflings-regular.woff2\""));
| var ___CSS_LOADER_URL___3___ = urlEscape(require("bootstrap-sass/assets/fonts/bootstrapglyphicons-halflings-regular.woff\""));
    at handleParseError (/Users/user/workspace/webpack-starter/node_modules/webpack/lib/NormalModule.js:432:19)
    at doBuild.err (/Users/user/workspace/webpack-starter/node_modules/webpack/lib/NormalModule.js:466:5)
    at runLoaders (/Users/user/workspace/webpack-starter/node_modules/webpack/lib/NormalModule.js:327:12)
    at /Users/user/workspace/webpack-starter/node_modules/loader-runner/lib/LoaderRunner.js:370:3
    at iterateNormalLoaders (/Users/user/workspace/webpack-starter/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
    at iterateNormalLoaders (/Users/user/workspace/webpack-starter/node_modules/loader-runner/lib/LoaderRunner.js:218:10)
    at /Users/user/workspace/webpack-starter/node_modules/loader-runner/lib/LoaderRunner.js:233:3
    at context.callback (/Users/user/workspace/webpack-starter/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at process.then.result (/Users/user/workspace/webpack-starter/node_modules/css-loader/dist/index.js:256:12)
 @ ./src/js/bootstrap.js 3:0-26

Code

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap';
$bootstrap-sass-asset-helper: true;
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

How Do We Reproduce?

Clone https://github.com/wmarques/css-loader-bug
Run npm i then npm start or npm run build

[alexander-akait]

Here some problems:

• Bootstrap 3 use twbs-font-path and twbs-image-path functions for generate url when you enable $bootstrap-sass-asset-helper: true, you should use true value only when use Compass, Sprockets, or Mincer. Without this modules bootstrap generate :

url(twbs-font-path("~bootstrap-sass/assets/fonts/bootstrapglyphicons-halflings-regular.eot?#iefix"))

It is invalid url so we can't resolve their, url can't contains other functions inside.

Also webpack doesn't add trailing slash on end of url variable.

Solution:

1. Disable $bootstrap-sass-asset-helper: false;
2. Modify $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'; (add / at end)

Also you can install compass or other library above (but they deprecated, better don't use them)

• Other issue what we should improve message in this case, i will send a PR and release new version

[wmarques]

@evilebottnawi thanks for your help, you are correct ! It's solved

[mrpandat]

Same problem solved thanks to @evilebottnawi.