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

wmarques commented 5 years ago

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 commented 5 years ago

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:

Disable $bootstrap-sass-asset-helper: false;
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 commented 5 years ago

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

mrpandat commented 5 years ago

Same problem solved thanks to @evilebottnawi.

webpack-contrib / css-loader