Skip to content

Commit 4616ee6

Browse files
vatchleyvatchley
committed
fix: ensure sass url() paths resolve
- in development, use resolve-url-loader after sass-loader to properly handle css `url()` calls - in production, use resolve-url-loader after sass-loader to properly handle css `url()` calls - also in production, corrected extension regex for sass loading
1 parent 288ecd0 commit 4616ee6

File tree

4 files changed

+174
-9
lines changed

4 files changed

+174
-9
lines changed

‎packages/react-scripts/config/webpack.config.dev.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ module.exports = {
7777
devtoolModuleFilenameTemplate: info =>
7878
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
7979
},
80+
watch: true,
8081
resolve: {
8182
// This allows you to set a fallback for where Webpack should look for modules.
8283
// We placed these paths second because we want `node_modules` to "win"
@@ -241,6 +242,7 @@ module.exports = {
241242
// Necessary for external CSS imports to work
242243
// https://github.com/facebookincubator/create-react-app/issues/2677
243244
ident: 'postcss',
245+
sourceMap: true,
244246
plugins: () => [
245247
require('postcss-flexbugs-fixes'),
246248
autoprefixer({
@@ -255,6 +257,7 @@ module.exports = {
255257
],
256258
},
257259
},
260+
require.resolve('resolve-url-loader'),
258261
require.resolve('sass-loader')
259262
],
260263
},
@@ -317,6 +320,7 @@ module.exports = {
317320
// Necessary for external CSS imports to work
318321
// https://github.com/facebookincubator/create-react-app/issues/2677
319322
ident: 'postcss',
323+
sourceMap: true,
320324
plugins: () => [
321325
require('postcss-flexbugs-fixes'),
322326
autoprefixer({
@@ -331,6 +335,7 @@ module.exports = {
331335
],
332336
},
333337
},
338+
require.resolve('resolve-url-loader'),
334339
require.resolve('sass-loader')
335340
],
336341
},

‎packages/react-scripts/config/webpack.config.prod.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,6 +249,7 @@ module.exports = {
249249
ident: 'postcss',
250250
plugins: () => [
251251
require('postcss-flexbugs-fixes'),
252+
sourceMap: shouldUseSourceMap,
252253
autoprefixer({
253254
browsers: [
254255
'>1%',
@@ -261,6 +262,7 @@ module.exports = {
261262
],
262263
},
263264
},
265+
require.resolve('resolve-url-loader'),
264266
{ loader: 'sass-loader', options: { sourceMap: shouldUseSourceMap } }
265267
],
266268
},
@@ -337,7 +339,7 @@ module.exports = {
337339
// use the "style" loader inside the async code so CSS from them won't be
338340
// in the main CSS file.
339341
{
340-
test: /\.css$/,
342+
test: /\.s[ac]ss$/,
341343
loader: ExtractTextPlugin.extract(
342344
Object.assign(
343345
{
@@ -357,6 +359,7 @@ module.exports = {
357359
// Necessary for external CSS imports to work
358360
// https://github.com/facebookincubator/create-react-app/issues/2677
359361
ident: 'postcss',
362+
sourceMap: shouldUseSourceMap,
360363
plugins: () => [
361364
require('postcss-flexbugs-fixes'),
362365
autoprefixer({
@@ -371,6 +374,7 @@ module.exports = {
371374
],
372375
},
373376
},
377+
require.resolve('resolve-url-loader'),
374378
{ loader: 'sass-loader', options: { sourceMap: shouldUseSourceMap } }
375379
],
376380
},

‎packages/react-scripts/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@
6262
},
6363
"devDependencies": {
6464
"react": "^15.5.4",
65-
"react-dom": "^15.5.4"
65+
"react-dom": "^15.5.4",
66+
"resolve-url-loader": "^2.1.0"
6667
},
6768
"optionalDependencies": {
6869
"fsevents": "1.1.2"

‎packages/react-scripts/yarn.lock

Lines changed: 162 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,18 @@ address@^1.0.1:
5555
version "1.0.3"
5656
resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
5757

58+
adjust-sourcemap-loader@^1.1.0:
59+
version "1.1.0"
60+
resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-1.1.0.tgz#412d92404eb61e4113635012cba53a33d008e0e2"
61+
dependencies:
62+
assert "^1.3.0"
63+
camelcase "^1.2.1"
64+
loader-utils "^1.0.2"
65+
lodash.assign "^4.0.1"
66+
lodash.defaults "^3.1.2"
67+
object-path "^0.9.2"
68+
regex-parser "^2.2.1"
69+
5870
ajv-keywords@^2.0.0, ajv-keywords@^2.1.0:
5971
version "2.1.0"
6072
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
@@ -258,7 +270,7 @@ assert-plus@^0.2.0:
258270
version "0.2.0"
259271
resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
260272

261-
assert@^1.1.1:
273+
assert@^1.1.1, assert@^1.3.0:
262274
version "1.4.1"
263275
resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
264276
dependencies:
@@ -290,6 +302,10 @@ asynckit@^0.4.0:
290302
version "0.4.0"
291303
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
292304

305+
atob@~1.1.0:
306+
version "1.1.3"
307+
resolved "https://registry.yarnpkg.com/atob/-/atob-1.1.3.tgz#95f13629b12c3a51a5d215abdce2aa9f32f80773"
308+
293309
autoprefixer@7.1.2:
294310
version "7.1.2"
295311
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.2.tgz#fbeaf07d48fd878e0682bf7cbeeade728adb2b18"
@@ -1397,7 +1413,7 @@ camelcase-keys@^2.0.0:
13971413
camelcase "^2.0.0"
13981414
map-obj "^1.0.0"
13991415

1400-
camelcase@^1.0.2:
1416+
camelcase@^1.0.2, camelcase@^1.2.1:
14011417
version "1.2.1"
14021418
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
14031419

@@ -1409,7 +1425,7 @@ camelcase@^3.0.0:
14091425
version "3.0.0"
14101426
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
14111427

1412-
camelcase@^4.1.0:
1428+
camelcase@^4.0.0, camelcase@^4.1.0:
14131429
version "4.1.0"
14141430
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
14151431

@@ -1694,7 +1710,11 @@ content-type@~1.0.4:
16941710
version "1.0.4"
16951711
resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
16961712

1697-
convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
1713+
convert-source-map@^0.3.3:
1714+
version "0.3.5"
1715+
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
1716+
1717+
convert-source-map@^1.1.0, convert-source-map@^1.1.1, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
16981718
version "1.5.0"
16991719
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
17001720

@@ -1857,6 +1877,15 @@ css-what@2.1:
18571877
version "2.1.0"
18581878
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
18591879

1880+
css@^2.0.0:
1881+
version "2.2.1"
1882+
resolved "https://registry.yarnpkg.com/css/-/css-2.2.1.tgz#73a4c81de85db664d4ee674f7d47085e3b2d55dc"
1883+
dependencies:
1884+
inherits "^2.0.1"
1885+
source-map "^0.1.38"
1886+
source-map-resolve "^0.3.0"
1887+
urix "^0.1.0"
1888+
18601889
cssesc@^0.1.0:
18611890
version "0.1.0"
18621891
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -4151,7 +4180,7 @@ loader-utils@^0.2.16:
41514180
json5 "^0.5.0"
41524181
object-assign "^4.0.1"
41534182

4154-
loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
4183+
loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
41554184
version "1.1.0"
41564185
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
41574186
dependencies:
@@ -4166,11 +4195,50 @@ locate-path@^2.0.0:
41664195
p-locate "^2.0.0"
41674196
path-exists "^3.0.0"
41684197

4198+
lodash._baseassign@^3.0.0:
4199+
version "3.2.0"
4200+
resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
4201+
dependencies:
4202+
lodash._basecopy "^3.0.0"
4203+
lodash.keys "^3.0.0"
4204+
4205+
lodash._basecopy@^3.0.0:
4206+
version "3.0.1"
4207+
resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
4208+
4209+
lodash._bindcallback@^3.0.0:
4210+
version "3.0.1"
4211+
resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
4212+
4213+
lodash._createassigner@^3.0.0:
4214+
version "3.1.1"
4215+
resolved "https://registry.yarnpkg.com/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11"
4216+
dependencies:
4217+
lodash._bindcallback "^3.0.0"
4218+
lodash._isiterateecall "^3.0.0"
4219+
lodash.restparam "^3.0.0"
4220+
4221+
lodash._getnative@^3.0.0:
4222+
version "3.9.1"
4223+
resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
4224+
4225+
lodash._isiterateecall@^3.0.0:
4226+
version "3.0.9"
4227+
resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
4228+
41694229
lodash._reinterpolate@~3.0.0:
41704230
version "3.0.0"
41714231
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
41724232

4173-
lodash.assign@^4.2.0:
4233+
lodash.assign@^3.0.0:
4234+
version "3.2.0"
4235+
resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-3.2.0.tgz#3ce9f0234b4b2223e296b8fa0ac1fee8ebca64fa"
4236+
dependencies:
4237+
lodash._baseassign "^3.0.0"
4238+
lodash._createassigner "^3.0.0"
4239+
lodash.keys "^3.0.0"
4240+
4241+
lodash.assign@^4.0.1, lodash.assign@^4.2.0:
41744242
version "4.2.0"
41754243
resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
41764244

@@ -4186,10 +4254,33 @@ lodash.cond@^4.3.0:
41864254
version "4.5.2"
41874255
resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
41884256

4189-
lodash.defaults@^4.2.0:
4257+
lodash.defaults@^3.1.2:
4258+
version "3.1.2"
4259+
resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-3.1.2.tgz#c7308b18dbf8bc9372d701a73493c61192bd2e2c"
4260+
dependencies:
4261+
lodash.assign "^3.0.0"
4262+
lodash.restparam "^3.0.0"
4263+
4264+
lodash.defaults@^4.0.0, lodash.defaults@^4.2.0:
41904265
version "4.2.0"
41914266
resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
41924267

4268+
lodash.isarguments@^3.0.0:
4269+
version "3.1.0"
4270+
resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
4271+
4272+
lodash.isarray@^3.0.0:
4273+
version "3.0.4"
4274+
resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
4275+
4276+
lodash.keys@^3.0.0:
4277+
version "3.1.2"
4278+
resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
4279+
dependencies:
4280+
lodash._getnative "^3.0.0"
4281+
lodash.isarguments "^3.0.0"
4282+
lodash.isarray "^3.0.0"
4283+
41934284
lodash.memoize@^4.1.2:
41944285
version "4.1.2"
41954286
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -4198,6 +4289,10 @@ lodash.mergewith@^4.6.0:
41984289
version "4.6.0"
41994290
resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
42004291

4292+
lodash.restparam@^3.0.0:
4293+
version "3.6.1"
4294+
resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
4295+
42014296
lodash.tail@^4.1.1:
42024297
version "4.1.1"
42034298
resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
@@ -4684,6 +4779,10 @@ object-keys@^1.0.8:
46844779
version "1.0.11"
46854780
resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
46864781

4782+
object-path@^0.9.2:
4783+
version "0.9.2"
4784+
resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.9.2.tgz#0fd9a74fc5fad1ae3968b586bda5c632bd6c05a5"
4785+
46874786
object.omit@^2.0.0:
46884787
version "2.0.1"
46894788
resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
@@ -5618,6 +5717,10 @@ regex-cache@^0.4.2:
56185717
dependencies:
56195718
is-equal-shallow "^0.1.3"
56205719

5720+
regex-parser@^2.2.1:
5721+
version "2.2.8"
5722+
resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.8.tgz#da4c0cda5a828559094168930f455f532b6ffbac"
5723+
56215724
regexpu-core@^1.0.0:
56225725
version "1.0.0"
56235726
resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
@@ -5777,6 +5880,24 @@ resolve-from@^1.0.0:
57775880
version "1.0.1"
57785881
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
57795882

5883+
resolve-url-loader@^2.1.0:
5884+
version "2.1.0"
5885+
resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-2.1.0.tgz#27c95cc16a4353923fdbdc2dbaf5eef22232c477"
5886+
dependencies:
5887+
adjust-sourcemap-loader "^1.1.0"
5888+
camelcase "^4.0.0"
5889+
convert-source-map "^1.1.1"
5890+
loader-utils "^1.0.0"
5891+
lodash.defaults "^4.0.0"
5892+
rework "^1.0.1"
5893+
rework-visit "^1.0.0"
5894+
source-map "^0.5.6"
5895+
urix "^0.1.0"
5896+
5897+
resolve-url@~0.2.1:
5898+
version "0.2.1"
5899+
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
5900+
57805901
resolve@1.1.7:
57815902
version "1.1.7"
57825903
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
@@ -5794,6 +5915,17 @@ restore-cursor@^2.0.0:
57945915
onetime "^2.0.0"
57955916
signal-exit "^3.0.2"
57965917

5918+
rework-visit@^1.0.0:
5919+
version "1.0.0"
5920+
resolved "https://registry.yarnpkg.com/rework-visit/-/rework-visit-1.0.0.tgz#9945b2803f219e2f7aca00adb8bc9f640f842c9a"
5921+
5922+
rework@^1.0.1:
5923+
version "1.0.1"
5924+
resolved "https://registry.yarnpkg.com/rework/-/rework-1.0.1.tgz#30806a841342b54510aa4110850cd48534144aa7"
5925+
dependencies:
5926+
convert-source-map "^0.3.3"
5927+
css "^2.0.0"
5928+
57975929
right-align@^0.1.1:
57985930
version "0.1.3"
57995931
resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
@@ -6073,12 +6205,25 @@ source-list-map@^2.0.0:
60736205
version "2.0.0"
60746206
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
60756207

6208+
source-map-resolve@^0.3.0:
6209+
version "0.3.1"
6210+
resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.3.1.tgz#610f6122a445b8dd51535a2a71b783dfc1248761"
6211+
dependencies:
6212+
atob "~1.1.0"
6213+
resolve-url "~0.2.1"
6214+
source-map-url "~0.3.0"
6215+
urix "~0.1.0"
6216+
60766217
source-map-support@^0.4.15:
60776218
version "0.4.18"
60786219
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
60796220
dependencies:
60806221
source-map "^0.5.6"
60816222

6223+
source-map-url@~0.3.0:
6224+
version "0.3.0"
6225+
resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.3.0.tgz#7ecaf13b57bcd09da8a40c5d269db33799d4aaf9"
6226+
60826227
source-map@0.5.6:
60836228
version "0.5.6"
60846229
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
@@ -6087,6 +6232,12 @@ source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, sourc
60876232
version "0.5.7"
60886233
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
60896234

6235+
source-map@^0.1.38:
6236+
version "0.1.43"
6237+
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
6238+
dependencies:
6239+
amdefine ">=0.0.4"
6240+
60906241
source-map@^0.4.2, source-map@^0.4.4:
60916242
version "0.4.4"
60926243
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
@@ -6553,6 +6704,10 @@ urijs@^1.16.1:
65536704
version "1.19.0"
65546705
resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.0.tgz#d8aa284d0e7469703a6988ad045c4cbfdf08ada0"
65556706

6707+
urix@^0.1.0, urix@~0.1.0:
6708+
version "0.1.0"
6709+
resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
6710+
65566711
url-loader@0.5.9:
65576712
version "0.5.9"
65586713
resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.9.tgz#cc8fea82c7b906e7777019250869e569e995c295"

0 commit comments

Comments
 (0)