Add support for absolute paths when using url() in CSS (#7937)

* Support scss absolute path resolution for url()

Adding resolve-url-loader broke all apps using scss with centralized assets folder and all url(./assets/*.png) broke (#7023).
This change allows apps to use url(/assets/*.png) and it would map to src/assets/*.png

* test: Add global scss assets test

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

@@ -133,6 +133,7 @@ module.exports = function (webpackEnv) {
           loader: require.resolve('resolve-url-loader'),
           options: {
             sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+            root: paths.appSrc,
           },
         },
         {

test/fixtures/global-scss-asset-resolution/index.test.js

@@ -0,0 +1,16 @@
+const testSetup = require('../__shared__/test-setup');
+
+if (testSetup.isLocal) {
+  // TODO: make this work locally
+  test('skipped locally', () => {});
+} else {
+  test('builds in development', async () => {
+    const { fulfilled } = await testSetup.scripts.start({ smoke: true });
+    expect(fulfilled).toBe(true);
+  });
+
+  test('builds in production', async () => {
+    const { fulfilled } = await testSetup.scripts.build();
+    expect(fulfilled).toBe(true);
+  });
+}

test/fixtures/global-scss-asset-resolution/package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "node-sass": "4.x",
+    "react": "latest",
+    "react-dom": "latest"
+  }
+}

test/fixtures/global-scss-asset-resolution/src/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.scss';
+
+ReactDOM.render(<div />, document.getElementById('root'));

test/fixtures/global-scss-asset-resolution/src/index.scss

@@ -0,0 +1,5 @@
+#root {
+    width: 300px;
+    height: 300px;
+    background: url(/images/logo.svg) center/cover no-repeat;
+}