Skip to content

Commit

Permalink
Add support for absolute paths when using url() in CSS (facebook#7937)
Browse files Browse the repository at this point in the history
* 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 (facebook#7023).
This change allows apps to use url(/assets/*.png) and it would map to src/assets/*.png

* test: Add global scss assets test
  • Loading branch information
atlanteh authored and justinsilvestre committed Oct 30, 2020
1 parent 0373ce6 commit 326b7ec
Show file tree
Hide file tree
Showing 7 changed files with 41 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/react-scripts/config/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ module.exports = function (webpackEnv) {
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
root: paths.appSrc,
},
},
{
Expand Down
Empty file.
16 changes: 16 additions & 0 deletions test/fixtures/global-scss-asset-resolution/index.test.js
Original file line number Diff line number Diff line change
@@ -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);
});
}
7 changes: 7 additions & 0 deletions test/fixtures/global-scss-asset-resolution/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"dependencies": {
"node-sass": "4.x",
"react": "latest",
"react-dom": "latest"
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions test/fixtures/global-scss-asset-resolution/src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';

ReactDOM.render(<div />, document.getElementById('root'));
5 changes: 5 additions & 0 deletions test/fixtures/global-scss-asset-resolution/src/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
#root {
width: 300px;
height: 300px;
background: url(/images/logo.svg) center/cover no-repeat;
}

0 comments on commit 326b7ec

Please sign in to comment.