diff --git a/src/components/CssWebpackConfig.js b/src/components/CssWebpackConfig.js index b1aebda82..87ed75870 100644 --- a/src/components/CssWebpackConfig.js +++ b/src/components/CssWebpackConfig.js @@ -108,7 +108,13 @@ class CssWebpackConfig extends AutomaticComponent { { loader: 'css-loader', options: { - url: Config.processCssUrls, + url: (url, resourcePath) => { + if (url.startsWith('/')) { + return false; + } + + return Config.processCssUrls; + }, modules: useCssModules } }, diff --git a/src/components/Preprocessor.js b/src/components/Preprocessor.js index d3c2fea71..305cdf355 100644 --- a/src/components/Preprocessor.js +++ b/src/components/Preprocessor.js @@ -57,7 +57,13 @@ class Preprocessor { { loader: 'css-loader', options: { - url: processUrls, + url: (url, resourcePath) => { + if (url.startsWith('/')) { + return false; + } + + return processUrls; + }, sourceMap: Mix.isUsing('sourcemaps'), importLoaders: 1 } diff --git a/test/features/preprocessors.js b/test/features/preprocessors.js index c7c507835..f8de93240 100644 --- a/test/features/preprocessors.js +++ b/test/features/preprocessors.js @@ -7,6 +7,15 @@ import webpack from '../helpers/webpack'; import '../helpers/mix'; +test('it does not process absolute urls', async t => { + mix.postCss(`test/fixtures/app/src/css/app.css`, 'css'); + + await t.notThrowsAsync( + webpack.compile(), + 'CSS failed to compile due to incorrect URL processing.' + ); +}); + test('it compiles PostCSS without JS', async t => { mix.postCss(`test/fixtures/app/src/css/app.css`, 'css'); @@ -201,7 +210,7 @@ test('Compiling multiple CSS assets places CSS in the correct location', async t assert.fileMatchesCss( `test/fixtures/app/dist/css/app.css`, - `body{color:red;}.app{color:red;}`, + `body{color:red;}.app{color:red;background:url('/absolute/image.jpg');}`, t ); }); diff --git a/test/fixtures/app/src/css/app.css b/test/fixtures/app/src/css/app.css index 95a4c1e27..3cac7a4cb 100644 --- a/test/fixtures/app/src/css/app.css +++ b/test/fixtures/app/src/css/app.css @@ -1,3 +1,4 @@ .app { color: red; + background: url('/absolute/image.jpg'); }