-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SASS_PATH not respected after updating CRA from v2.1.8 to v3.0.1 #7023
Comments
I just ran into the same issue while trying to use the material-components-web-react module. Based on what I read in the CRA documentation, it appears that your environment variables are required to begin with the REACT_APP_ prefix. I understand the goal, but this does seem pretty limiting. https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
|
Unfortunately adding
I believe |
Right, I think node-sass is expecting SASS_PATH. But I think that Create React App is ignoring your SASS_PATH entry in the .env file because it does not start with REACT_APP_. What happens if you add both entries to your .env file (SASS_PATH and REACT_APP_SASS_PATH) and then console log process.env.SASS_PATH and process.env.REACT_APP_SASS_PATH? I suspect SASS_PATH will be undefined but REACT_APP_SASS_PATH will be the value you set it to in the .env file. This doesn't help make node-sass work, but could explain what's happening at least. |
Just to update, I confirmed this in one of my own CRA projects. With the following .env file
After adding these console logs
I see the following in my console.
If I'm understanding this correctly, this means your SASS_PATH entry in your .env file is being ignored by CRA, and node-sass is likely receiving the undefined value, which is why it isn't working as expected. To be clear, I don't think setting REACT_APP_SASS_PATH is going to make node-sass work, since node-sass is not looking for an environment variable with that REACT_APP_ prefix. I'm simply pointing out why I think it isn't working, not what should be done to resolve it. Hope that at least helps a bit. I'll let you know if I discover a proper workaround on my own project. |
@stephanbaker thanks for investigating! The @arkn98, does this still work with eg. |
@petetnt Sorry for the late reply. No, it shows the same behavior with |
I'm experiencing the same problem. I have a Although I agree with the remark from the docs:
I also agree with @stephanbaker that it is very limiting. The reason I'm using At the very least it would be nice if in the case of Sass files the |
Not only images imports like absolute imports in background urls are broken after migrating to Unfortunately setting any of |
After setting up a new project via CRA I have this issue regardless of where |
I am also seeing this issue. Has there been any progress in resolving this? |
I've run into this issue as well. I've tried both with the The problem appears to have been introduced in 3.1.0, as my configuration works fine in 3.0.1, but not 3.1.0. I suspect the culprit might be #5829. After reading the README for resolve-url-loader, it seems like it might be necessary to use the I'm out of time to dig into this further right now, so I'm going to stay on 3.0.1 for now. |
After digging into the code and docs, I've figured it out. I'm sending a PR with the fix |
Has there been any movement on this? Believe I'm experiencing the same issue. |
Initially this was scheduled for 3.4, but then it was pushed to 3.5 |
It is now pushed to 4.1. |
The change is not present in webpack.config.js file that @atlanteh made, so I believe it is not pushed to 3.4.1. So will this be fixed in 3.5 or sooner? I need this too :) I couldn't find your PR, did you create one? |
What @arkn98 means is that they pushed reviewing the pr to 4.1 milestone. PR is not yet merged. If it's important to you guys, please comment on the pr to raise attention |
Ah ok, thanks for clarifying this. Can I get a link to PR that you're referring to? |
|
* 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
* 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
I really appreciate seeing this merged! Do we know when it might be released? |
* 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
* Update packages (facebook#9081) * Fix dotenv file loading order (facebook#9037) * Fix dotenv file loading order * tests: fix failing env tests * tests: fix more failing tests Co-authored-by: Brody McKee <mrmckeb@hotmail.com> * feat: remove typescript flag and NODE_PATH support (facebook#8934) * Update question issue template * Update getting-started.md to match templates (facebook#9089) * Upgrade to Jest 26 (facebook#8955) * Update Jest to 26 * Upgrade to Jest 26.0.1 * Use jest-circus test runner by default * Try resolving test runner to fix behavior tests * Run TypeScript verification in new context * Delete globalThis if polyfilled * feat(react-scripts): allow testMatch for jest config (facebook#9114) resolves facebook#8637 * Add support for absolute paths when using url() in CSS (facebook#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 (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 * Upgrade dependencies (facebook#9132) * Fix typo in docs (facebook#9135) * Add performance relayer + documentation (web-vitals) (facebook#9116) Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com> Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Update deployment docs for Azure Static Web Apps (facebook#9042) Co-authored-by: Minh Nguyen <minhnguyenxx@gmail.com> * Replace Spectrum links with GitHub Discussions (facebook#9102) * Use process.execPath to spawn node subprocess (facebook#8694) * Upgrade dependencies (facebook#9196) * Bump version of Verdaccio (facebook#7787) * Support ESLint 7.x (facebook#8978) * Fix chai URL (facebook#8895) The root domain, chaijs.com, does not serve a valid certificate and gives a browser warning. * Explain how to uninstall create-react-app globally (facebook#9244) * Explain how to uninstall create-react-app globally * Add uninstallation intructions for yarn * Upgrade dependencies (facebook#9317) * Switch to the Workbox InjectManifest plugin (facebook#9205) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Upgrade refresh plugin (facebook#9348) * feat: Update ESLint dependencies (facebook#9251) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Remove server worker registration from default templates (facebook#9349) * Clarify wording in adding TypeScript to existing project (facebook#9231) * feat: better refresh plugin integration (facebook#9375) * feat: exit on outdated create-react-app version (facebook#9359) * Prepare 4.0.0 alpha release * Updated README.md Templates to Follow ESLint Markdown Rules (facebook#9241) * [Doc] fix React Testing Library example (facebook#9245) * Update running-tests.md (facebook#9380) * Add Fast Refresh warning when using React < 16.10 (facebook#9350) * Publish refreshOverlayInterop with react-dev-utils (facebook#9390) * fix: remove deprecated rule (facebook#9401) * clean formatMessage usage (facebook#9059) * feat: Update testing-library dependencies to latest (facebook#9252) * fix: use default modules option from `preset-env` (facebook#9374) * Bump immer version (facebook#8933) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> Co-authored-by: Ian Sutherland <ian@iansutherland.ca> * Upgrade whatwg-fetch (facebook#9392) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Fix template name handling (facebook#9412) * Prepare 4.0.0 alpha release * chore: update to jest@26.3 (facebook#9461) * Create SECURITY.md * Add 3.4.2 to changelog * Add 3.4.3 to the changelog * Fixes in the /packages/react-devs-utils/README.md file (facebook#9471) * Added CRA logo in README.md (facebook#9363) * Added React logo in README.md * Added React logo in README file that makes looks nicer now. * Added CRA Logo in README.md that looks nicer * Replacing React Logo with CRA Logo instead Co-authored-by: Eddie Monge Jr <eddiemonge@users.noreply.github.com> * Update README.md Co-authored-by: Eddie Monge Jr <eddiemonge@users.noreply.github.com> Co-authored-by: Dan Abramov <dan.abramov@gmail.com> * Update Vercel deployment documentation (facebook#9560) * Fix insensitive language in Docusaurus docs (facebook#9618) * Remove ESLint extends and add Jest rules (facebook#9587) * fix: Fix azure-pipelines' endOfLine (facebook#9258) * Update template dependencies to latest version (facebook#9526) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Update running-tests.md (facebook#9073) * feat: Update ESLint dependencies (facebook#9434) * Emphasise that Next.js is capable of SSG (facebook#9630) * docs: add alt tag to homepage logo (facebook#9499) * fix: resolve CI build failure (facebook#9640) * Use new JSX transform with React 17 (facebook#9645) * Upgrade dependencies (facebook#9639) * Prepare 4.0.0 alpha release * Update postcss-safe-parser * Prepare 4.0.0 alpha release * Update CODEOWNERS * fix: resolve ESLint config from appPath (facebook#9683) * Add AVIF image support (facebook#9611) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * fix: resolve new JSX runtime issues (facebook#9788) * Upgrade Docusaurus to latest version (facebook#9728) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> Co-authored-by: Joe Haddad <timer150@gmail.com> Co-authored-by: Brody McKee <mrmckeb@hotmail.com> Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com> Co-authored-by: Ian Sutherland <ian@iansutherland.ca> Co-authored-by: Josemaria Nriagu <49484425+josenriagu@users.noreply.github.com> Co-authored-by: Jeroen Claassens <jeroen.claassens@live.nl> Co-authored-by: atlanteh <atlanteh@gmail.com> Co-authored-by: Jakob Krigovsky <jakob@krigovsky.com> Co-authored-by: Houssein Djirdeh <houssein.djirdeh@gmail.com> Co-authored-by: Burke Holland <burkeholland@gmail.com> Co-authored-by: Minh Nguyen <minhnguyenxx@gmail.com> Co-authored-by: Anuraag Agrawal <anuraaga@gmail.com> Co-authored-by: Michaël De Boey <info@michaeldeboey.be> Co-authored-by: Brian Morearty <brian@morearty.org> Co-authored-by: Nick McCurdy <nick@nickmccurdy.com> Co-authored-by: Jeffrey Posnick <jeffy@google.com> Co-authored-by: Dylan Brookes <24858006+merelinguist@users.noreply.github.com> Co-authored-by: Michael Mok <pmmmwh@gmail.com> Co-authored-by: Rafael Quijada <firehawk09@users.noreply.github.com> Co-authored-by: Sakito Mukai <sakito21@gmail.com> Co-authored-by: Andy C <7357845+andycanderson@users.noreply.github.com> Co-authored-by: Kline Moralee <klinemoralee@gmail.com> Co-authored-by: Gerrit Alex <admin@gerritalex.de> Co-authored-by: Sam Chen <chenxsan@gmail.com> Co-authored-by: Huáng Jùnliàng <jlhwung@gmail.com> Co-authored-by: Stafford Williams <staff0rd@users.noreply.github.com> Co-authored-by: Lenard Pratt <striderman34@gmail.com> Co-authored-by: Simen Bekkhus <sbekkhus91@gmail.com> Co-authored-by: Dan Abramov <dan.abramov@gmail.com> Co-authored-by: Webdot_30 <nwaforuchechukwu2007@gmail.com> Co-authored-by: Raihan Nismara <31585789+raihan71@users.noreply.github.com> Co-authored-by: Eddie Monge Jr <eddiemonge@users.noreply.github.com> Co-authored-by: Timothy <1695613+timothyis@users.noreply.github.com> Co-authored-by: Liam Duffy <3338808+liamness@users.noreply.github.com> Co-authored-by: Tobias Büschel <13087421+tobiasbueschel@users.noreply.github.com> Co-authored-by: Hongbo Miao <Hongbo.Miao@outlook.com> Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>
* Update packages (facebook#9081) * Fix dotenv file loading order (facebook#9037) * Fix dotenv file loading order * tests: fix failing env tests * tests: fix more failing tests Co-authored-by: Brody McKee <mrmckeb@hotmail.com> * feat: remove typescript flag and NODE_PATH support (facebook#8934) * Update question issue template * Update getting-started.md to match templates (facebook#9089) * Upgrade to Jest 26 (facebook#8955) * Update Jest to 26 * Upgrade to Jest 26.0.1 * Use jest-circus test runner by default * Try resolving test runner to fix behavior tests * Run TypeScript verification in new context * Delete globalThis if polyfilled * feat(react-scripts): allow testMatch for jest config (facebook#9114) resolves facebook#8637 * Add support for absolute paths when using url() in CSS (facebook#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 (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 * Upgrade dependencies (facebook#9132) * Fix typo in docs (facebook#9135) * Add performance relayer + documentation (web-vitals) (facebook#9116) Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com> Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Update deployment docs for Azure Static Web Apps (facebook#9042) Co-authored-by: Minh Nguyen <minhnguyenxx@gmail.com> * Replace Spectrum links with GitHub Discussions (facebook#9102) * Use process.execPath to spawn node subprocess (facebook#8694) * Upgrade dependencies (facebook#9196) * Bump version of Verdaccio (facebook#7787) * Support ESLint 7.x (facebook#8978) * Fix chai URL (facebook#8895) The root domain, chaijs.com, does not serve a valid certificate and gives a browser warning. * Explain how to uninstall create-react-app globally (facebook#9244) * Explain how to uninstall create-react-app globally * Add uninstallation intructions for yarn * Upgrade dependencies (facebook#9317) * Switch to the Workbox InjectManifest plugin (facebook#9205) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Upgrade refresh plugin (facebook#9348) * feat: Update ESLint dependencies (facebook#9251) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Remove server worker registration from default templates (facebook#9349) * Clarify wording in adding TypeScript to existing project (facebook#9231) * feat: better refresh plugin integration (facebook#9375) * feat: exit on outdated create-react-app version (facebook#9359) * Prepare 4.0.0 alpha release * Updated README.md Templates to Follow ESLint Markdown Rules (facebook#9241) * [Doc] fix React Testing Library example (facebook#9245) * Update running-tests.md (facebook#9380) * Add Fast Refresh warning when using React < 16.10 (facebook#9350) * Publish refreshOverlayInterop with react-dev-utils (facebook#9390) * fix: remove deprecated rule (facebook#9401) * clean formatMessage usage (facebook#9059) * feat: Update testing-library dependencies to latest (facebook#9252) * fix: use default modules option from `preset-env` (facebook#9374) * Bump immer version (facebook#8933) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> Co-authored-by: Ian Sutherland <ian@iansutherland.ca> * Upgrade whatwg-fetch (facebook#9392) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Fix template name handling (facebook#9412) * Prepare 4.0.0 alpha release * chore: update to jest@26.3 (facebook#9461) * Create SECURITY.md * Add 3.4.2 to changelog * Add 3.4.3 to the changelog * Fixes in the /packages/react-devs-utils/README.md file (facebook#9471) * Added CRA logo in README.md (facebook#9363) * Added React logo in README.md * Added React logo in README file that makes looks nicer now. * Added CRA Logo in README.md that looks nicer * Replacing React Logo with CRA Logo instead Co-authored-by: Eddie Monge Jr <eddiemonge@users.noreply.github.com> * Update README.md Co-authored-by: Eddie Monge Jr <eddiemonge@users.noreply.github.com> Co-authored-by: Dan Abramov <dan.abramov@gmail.com> * Update Vercel deployment documentation (facebook#9560) * Fix insensitive language in Docusaurus docs (facebook#9618) * Remove ESLint extends and add Jest rules (facebook#9587) * fix: Fix azure-pipelines' endOfLine (facebook#9258) * Update template dependencies to latest version (facebook#9526) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Update running-tests.md (facebook#9073) * feat: Update ESLint dependencies (facebook#9434) * Emphasise that Next.js is capable of SSG (facebook#9630) * docs: add alt tag to homepage logo (facebook#9499) * fix: resolve CI build failure (facebook#9640) * Use new JSX transform with React 17 (facebook#9645) * Upgrade dependencies (facebook#9639) * Prepare 4.0.0 alpha release * Update postcss-safe-parser * Prepare 4.0.0 alpha release * Update CODEOWNERS * fix: resolve ESLint config from appPath (facebook#9683) * Add AVIF image support (facebook#9611) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * fix: resolve new JSX runtime issues (facebook#9788) * Upgrade Docusaurus to latest version (facebook#9728) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> Co-authored-by: Joe Haddad <timer150@gmail.com> Co-authored-by: Brody McKee <mrmckeb@hotmail.com> Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com> Co-authored-by: Ian Sutherland <ian@iansutherland.ca> Co-authored-by: Josemaria Nriagu <49484425+josenriagu@users.noreply.github.com> Co-authored-by: Jeroen Claassens <jeroen.claassens@live.nl> Co-authored-by: atlanteh <atlanteh@gmail.com> Co-authored-by: Jakob Krigovsky <jakob@krigovsky.com> Co-authored-by: Houssein Djirdeh <houssein.djirdeh@gmail.com> Co-authored-by: Burke Holland <burkeholland@gmail.com> Co-authored-by: Minh Nguyen <minhnguyenxx@gmail.com> Co-authored-by: Anuraag Agrawal <anuraaga@gmail.com> Co-authored-by: Michaël De Boey <info@michaeldeboey.be> Co-authored-by: Brian Morearty <brian@morearty.org> Co-authored-by: Nick McCurdy <nick@nickmccurdy.com> Co-authored-by: Jeffrey Posnick <jeffy@google.com> Co-authored-by: Dylan Brookes <24858006+merelinguist@users.noreply.github.com> Co-authored-by: Michael Mok <pmmmwh@gmail.com> Co-authored-by: Rafael Quijada <firehawk09@users.noreply.github.com> Co-authored-by: Sakito Mukai <sakito21@gmail.com> Co-authored-by: Andy C <7357845+andycanderson@users.noreply.github.com> Co-authored-by: Kline Moralee <klinemoralee@gmail.com> Co-authored-by: Gerrit Alex <admin@gerritalex.de> Co-authored-by: Sam Chen <chenxsan@gmail.com> Co-authored-by: Huáng Jùnliàng <jlhwung@gmail.com> Co-authored-by: Stafford Williams <staff0rd@users.noreply.github.com> Co-authored-by: Lenard Pratt <striderman34@gmail.com> Co-authored-by: Simen Bekkhus <sbekkhus91@gmail.com> Co-authored-by: Dan Abramov <dan.abramov@gmail.com> Co-authored-by: Webdot_30 <nwaforuchechukwu2007@gmail.com> Co-authored-by: Raihan Nismara <31585789+raihan71@users.noreply.github.com> Co-authored-by: Eddie Monge Jr <eddiemonge@users.noreply.github.com> Co-authored-by: Timothy <1695613+timothyis@users.noreply.github.com> Co-authored-by: Liam Duffy <3338808+liamness@users.noreply.github.com> Co-authored-by: Tobias Büschel <13087421+tobiasbueschel@users.noreply.github.com> Co-authored-by: Hongbo Miao <Hongbo.Miao@outlook.com> Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>
* 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
* Update packages (facebook#9081) * Fix dotenv file loading order (facebook#9037) * Fix dotenv file loading order * tests: fix failing env tests * tests: fix more failing tests Co-authored-by: Brody McKee <mrmckeb@hotmail.com> * feat: remove typescript flag and NODE_PATH support (facebook#8934) * Update question issue template * Update getting-started.md to match templates (facebook#9089) * Upgrade to Jest 26 (facebook#8955) * Update Jest to 26 * Upgrade to Jest 26.0.1 * Use jest-circus test runner by default * Try resolving test runner to fix behavior tests * Run TypeScript verification in new context * Delete globalThis if polyfilled * feat(react-scripts): allow testMatch for jest config (facebook#9114) resolves facebook#8637 * Add support for absolute paths when using url() in CSS (facebook#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 (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 * Upgrade dependencies (facebook#9132) * Fix typo in docs (facebook#9135) * Add performance relayer + documentation (web-vitals) (facebook#9116) Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com> Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Update deployment docs for Azure Static Web Apps (facebook#9042) Co-authored-by: Minh Nguyen <minhnguyenxx@gmail.com> * Replace Spectrum links with GitHub Discussions (facebook#9102) * Use process.execPath to spawn node subprocess (facebook#8694) * Upgrade dependencies (facebook#9196) * Bump version of Verdaccio (facebook#7787) * Support ESLint 7.x (facebook#8978) * Fix chai URL (facebook#8895) The root domain, chaijs.com, does not serve a valid certificate and gives a browser warning. * Explain how to uninstall create-react-app globally (facebook#9244) * Explain how to uninstall create-react-app globally * Add uninstallation intructions for yarn * Upgrade dependencies (facebook#9317) * Switch to the Workbox InjectManifest plugin (facebook#9205) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Upgrade refresh plugin (facebook#9348) * feat: Update ESLint dependencies (facebook#9251) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Remove server worker registration from default templates (facebook#9349) * Clarify wording in adding TypeScript to existing project (facebook#9231) * feat: better refresh plugin integration (facebook#9375) * feat: exit on outdated create-react-app version (facebook#9359) * Prepare 4.0.0 alpha release * Updated README.md Templates to Follow ESLint Markdown Rules (facebook#9241) * [Doc] fix React Testing Library example (facebook#9245) * Update running-tests.md (facebook#9380) * Add Fast Refresh warning when using React < 16.10 (facebook#9350) * Publish refreshOverlayInterop with react-dev-utils (facebook#9390) * fix: remove deprecated rule (facebook#9401) * clean formatMessage usage (facebook#9059) * feat: Update testing-library dependencies to latest (facebook#9252) * fix: use default modules option from `preset-env` (facebook#9374) * Bump immer version (facebook#8933) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> Co-authored-by: Ian Sutherland <ian@iansutherland.ca> * Upgrade whatwg-fetch (facebook#9392) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Fix template name handling (facebook#9412) * Prepare 4.0.0 alpha release * chore: update to jest@26.3 (facebook#9461) * Create SECURITY.md * Add 3.4.2 to changelog * Add 3.4.3 to the changelog * Fixes in the /packages/react-devs-utils/README.md file (facebook#9471) * Added CRA logo in README.md (facebook#9363) * Added React logo in README.md * Added React logo in README file that makes looks nicer now. * Added CRA Logo in README.md that looks nicer * Replacing React Logo with CRA Logo instead Co-authored-by: Eddie Monge Jr <eddiemonge@users.noreply.github.com> * Update README.md Co-authored-by: Eddie Monge Jr <eddiemonge@users.noreply.github.com> Co-authored-by: Dan Abramov <dan.abramov@gmail.com> * Update Vercel deployment documentation (facebook#9560) * Fix insensitive language in Docusaurus docs (facebook#9618) * Remove ESLint extends and add Jest rules (facebook#9587) * fix: Fix azure-pipelines' endOfLine (facebook#9258) * Update template dependencies to latest version (facebook#9526) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Update running-tests.md (facebook#9073) * feat: Update ESLint dependencies (facebook#9434) * Emphasise that Next.js is capable of SSG (facebook#9630) * docs: add alt tag to homepage logo (facebook#9499) * fix: resolve CI build failure (facebook#9640) * Use new JSX transform with React 17 (facebook#9645) * Upgrade dependencies (facebook#9639) * Prepare 4.0.0 alpha release * Update postcss-safe-parser * Prepare 4.0.0 alpha release * Update CODEOWNERS * fix: resolve ESLint config from appPath (facebook#9683) * Add AVIF image support (facebook#9611) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * fix: resolve new JSX runtime issues (facebook#9788) * Upgrade Docusaurus to latest version (facebook#9728) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> Co-authored-by: Joe Haddad <timer150@gmail.com> Co-authored-by: Brody McKee <mrmckeb@hotmail.com> Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com> Co-authored-by: Ian Sutherland <ian@iansutherland.ca> Co-authored-by: Josemaria Nriagu <49484425+josenriagu@users.noreply.github.com> Co-authored-by: Jeroen Claassens <jeroen.claassens@live.nl> Co-authored-by: atlanteh <atlanteh@gmail.com> Co-authored-by: Jakob Krigovsky <jakob@krigovsky.com> Co-authored-by: Houssein Djirdeh <houssein.djirdeh@gmail.com> Co-authored-by: Burke Holland <burkeholland@gmail.com> Co-authored-by: Minh Nguyen <minhnguyenxx@gmail.com> Co-authored-by: Anuraag Agrawal <anuraaga@gmail.com> Co-authored-by: Michaël De Boey <info@michaeldeboey.be> Co-authored-by: Brian Morearty <brian@morearty.org> Co-authored-by: Nick McCurdy <nick@nickmccurdy.com> Co-authored-by: Jeffrey Posnick <jeffy@google.com> Co-authored-by: Dylan Brookes <24858006+merelinguist@users.noreply.github.com> Co-authored-by: Michael Mok <pmmmwh@gmail.com> Co-authored-by: Rafael Quijada <firehawk09@users.noreply.github.com> Co-authored-by: Sakito Mukai <sakito21@gmail.com> Co-authored-by: Andy C <7357845+andycanderson@users.noreply.github.com> Co-authored-by: Kline Moralee <klinemoralee@gmail.com> Co-authored-by: Gerrit Alex <admin@gerritalex.de> Co-authored-by: Sam Chen <chenxsan@gmail.com> Co-authored-by: Huáng Jùnliàng <jlhwung@gmail.com> Co-authored-by: Stafford Williams <staff0rd@users.noreply.github.com> Co-authored-by: Lenard Pratt <striderman34@gmail.com> Co-authored-by: Simen Bekkhus <sbekkhus91@gmail.com> Co-authored-by: Dan Abramov <dan.abramov@gmail.com> Co-authored-by: Webdot_30 <nwaforuchechukwu2007@gmail.com> Co-authored-by: Raihan Nismara <31585789+raihan71@users.noreply.github.com> Co-authored-by: Eddie Monge Jr <eddiemonge@users.noreply.github.com> Co-authored-by: Timothy <1695613+timothyis@users.noreply.github.com> Co-authored-by: Liam Duffy <3338808+liamness@users.noreply.github.com> Co-authored-by: Tobias Büschel <13087421+tobiasbueschel@users.noreply.github.com> Co-authored-by: Hongbo Miao <Hongbo.Miao@outlook.com> Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>
* Update template tests (facebook#8705) * Bump TypeScript template to 3.8 (facebook#8713) * Add .cjs and .mjs files support to test runner (facebook#8768) * Use simplified import of @testing-library/jest-dom (facebook#8763) * Include absoluteRuntime in babel preset docs (facebook#5847) * Specify what files are served form a bare local copy (facebook#8749) * fix: handle templates without main package field (facebook#8734) * Add experimental react-refresh support (facebook#8582) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Add setupTests.js to the list of generated files (facebook#8791) * Simplify wording in setting-up-your-editor.md (facebook#8684) * Update url to see prettier in action (facebook#8610) * Bump acorn from 6.4.0 to 6.4.1 in /docusaurus/website (facebook#8656) Bumps [acorn](https://github.com/acornjs/acorn) from 6.4.0 to 6.4.1. - [Release notes](https://github.com/acornjs/acorn/releases) - [Commits](acornjs/acorn@6.4.0...6.4.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Don't use webpack multi entry unnecessarily (facebook#8834) Passing an array with a single entry is not equivalent. This causes Webpack to generate another wrapper module around the entry. This is just unnecessary overhead and bytes. * Widen eslint-config-react-app peer dependency versions (facebook#8892) See facebook#7790 for a previous similar PR. * Revert "Replace favicon in templates (facebook#8194)" (facebook#8925) This reverts commit c03bb36. * Minor/patch dependency upgrades (facebook#8947) * Upgrade to Jest 25 (facebook#8362) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Drop Node 8 support (facebook#8948) * Bump React Hooks ESLint plugin to 4.0.0 (facebook#8939) * Update build script deployment URL (facebook#8651) * Do not check for interactive session to shut down dev server (facebook#8845) * Support source maps for scss in dev environments (facebook#8638) * Skip stdin resuming to support lerna parallel (facebook#8700) * Set resetMocks to true by default in jest config (facebook#7899) * Add import/no-anonymous-default-export lint rule (facebook#8926) * Upgrade testing-library packages (facebook#8406) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Bump style-loader to 1.2.1 (facebook#8891) * Support devDependencies in templates (facebook#8838) * fix react-refresh babel plugin not applied (facebook#8952) * Add a VSCode tip in the CSS reset section (facebook#8246) * Add back in --stats output from webpack. (facebook#8790) * Fix --use-pnp for Yarn 2 (facebook#8460) * Replace period in CSS Module classnames (facebook#8492) * Move shortlinks to cra.link (facebook#8957) * Remove outdated comment (facebook#8858) * bump webpack-dev-server to 3.11.0 (facebook#8975) Co-authored-by: Marc Hassan <marc@unqork.com> * Dependency major version upgrades (facebook#8950) * Update packages (facebook#9081) * Fix dotenv file loading order (facebook#9037) * Fix dotenv file loading order * tests: fix failing env tests * tests: fix more failing tests Co-authored-by: Brody McKee <mrmckeb@hotmail.com> * feat: remove typescript flag and NODE_PATH support (facebook#8934) * Update question issue template * Update getting-started.md to match templates (facebook#9089) * Upgrade to Jest 26 (facebook#8955) * Update Jest to 26 * Upgrade to Jest 26.0.1 * Use jest-circus test runner by default * Try resolving test runner to fix behavior tests * Run TypeScript verification in new context * Delete globalThis if polyfilled * feat(react-scripts): allow testMatch for jest config (facebook#9114) resolves facebook#8637 * Add support for absolute paths when using url() in CSS (facebook#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 (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 * Upgrade dependencies (facebook#9132) * Fix typo in docs (facebook#9135) * Add performance relayer + documentation (web-vitals) (facebook#9116) Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com> Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Update deployment docs for Azure Static Web Apps (facebook#9042) Co-authored-by: Minh Nguyen <minhnguyenxx@gmail.com> * Replace Spectrum links with GitHub Discussions (facebook#9102) * Use process.execPath to spawn node subprocess (facebook#8694) * Upgrade dependencies (facebook#9196) * Bump version of Verdaccio (facebook#7787) * Support ESLint 7.x (facebook#8978) * Fix chai URL (facebook#8895) The root domain, chaijs.com, does not serve a valid certificate and gives a browser warning. * Explain how to uninstall create-react-app globally (facebook#9244) * Explain how to uninstall create-react-app globally * Add uninstallation intructions for yarn * Upgrade dependencies (facebook#9317) * Switch to the Workbox InjectManifest plugin (facebook#9205) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Upgrade refresh plugin (facebook#9348) * feat: Update ESLint dependencies (facebook#9251) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Remove server worker registration from default templates (facebook#9349) * Clarify wording in adding TypeScript to existing project (facebook#9231) * feat: better refresh plugin integration (facebook#9375) * feat: exit on outdated create-react-app version (facebook#9359) * Prepare 4.0.0 alpha release * Updated README.md Templates to Follow ESLint Markdown Rules (facebook#9241) * [Doc] fix React Testing Library example (facebook#9245) * Update running-tests.md (facebook#9380) * Add Fast Refresh warning when using React < 16.10 (facebook#9350) * Publish refreshOverlayInterop with react-dev-utils (facebook#9390) * fix: remove deprecated rule (facebook#9401) * clean formatMessage usage (facebook#9059) * feat: Update testing-library dependencies to latest (facebook#9252) * fix: use default modules option from `preset-env` (facebook#9374) * Bump immer version (facebook#8933) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> Co-authored-by: Ian Sutherland <ian@iansutherland.ca> * Upgrade whatwg-fetch (facebook#9392) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Fix template name handling (facebook#9412) * Prepare 4.0.0 alpha release * chore: update to jest@26.3 (facebook#9461) * Create SECURITY.md * Add 3.4.2 to changelog * Add 3.4.3 to the changelog * Fixes in the /packages/react-devs-utils/README.md file (facebook#9471) * Added CRA logo in README.md (facebook#9363) * Added React logo in README.md * Added React logo in README file that makes looks nicer now. * Added CRA Logo in README.md that looks nicer * Replacing React Logo with CRA Logo instead Co-authored-by: Eddie Monge Jr <eddiemonge@users.noreply.github.com> * Update README.md Co-authored-by: Eddie Monge Jr <eddiemonge@users.noreply.github.com> Co-authored-by: Dan Abramov <dan.abramov@gmail.com> * Update Vercel deployment documentation (facebook#9560) * Fix insensitive language in Docusaurus docs (facebook#9618) * Remove ESLint extends and add Jest rules (facebook#9587) * fix: Fix azure-pipelines' endOfLine (facebook#9258) * Update template dependencies to latest version (facebook#9526) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Update running-tests.md (facebook#9073) * feat: Update ESLint dependencies (facebook#9434) * Emphasise that Next.js is capable of SSG (facebook#9630) * docs: add alt tag to homepage logo (facebook#9499) * fix: resolve CI build failure (facebook#9640) * Use new JSX transform with React 17 (facebook#9645) * Upgrade dependencies (facebook#9639) * Prepare 4.0.0 alpha release * Update postcss-safe-parser * Prepare 4.0.0 alpha release * Update CODEOWNERS * fix: resolve ESLint config from appPath (facebook#9683) * Add AVIF image support (facebook#9611) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * fix: resolve new JSX runtime issues (facebook#9788) * Upgrade Docusaurus to latest version (facebook#9728) * Replace deprecated eslint-loader with eslint-webpack-plugin (facebook#9751) * Replace deprecated eslint-loader by eslint-webpack-plugin * Update eslintFormatter for eslint-webpack-plugin * fix: always enable jsx-uses-react Co-authored-by: Brody McKee <mrmckeb@hotmail.com> * Add 3.4.4 to the changelog * Bump resolve-url-loader version (facebook#9841) * Bump resolve-url-loader version * Unpin resolve-url-loader * Fix refreshOverlayInterop module scope error (facebook#9805) * Make eslint-plugin-jest an optional peerDependency (facebook#9670) * feat(eslint-config-react-app): Add jest & testing-library rules (facebook#8963) * feat: Update ESLint dependencies (facebook#9856) * feat: remove unused React imports (facebook#9853) * feat: Update all dependencies (facebook#9857) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * New JSX Transform opt out (facebook#9861) * Use new JSX setting with TypeScript 4.1.0 (facebook#9734) * Upgrade to React 17 (facebook#9863) * Prepare 4.0.0 alpha release * Pass JSX runtime setting to Babel preset in Jest config (facebook#9865) * Prepare 4.0.0 release * Update CHANGELOG * Add link to Open Collective (facebook#9864) * Update CHANGELOG * Update react dom in error overlay * Prepare 4.0.0 release * Publish - babel-plugin-named-asset-import@0.3.7 - babel-preset-react-app@10.0.0 - confusing-browser-globals@1.0.10 - cra-template-typescript@1.1.0 - cra-template@1.1.0 - create-react-app@4.0.0 - eslint-config-react-app@6.0.0 - react-app-polyfill@2.0.0 - react-dev-utils@11.0.0 - react-error-overlay@6.0.8 - react-scripts@4.0.0 * undo antd-package removel Co-authored-by: Michaël De Boey <info@michaeldeboey.be> Co-authored-by: Braedon Gough <38016720+braedongough@users.noreply.github.com> Co-authored-by: Andrey Sitnik <andrey@sitnik.ru> Co-authored-by: Kirill Korolyov <kirill.korolyov@gmail.com> Co-authored-by: Iddan Aaronsohn <mail@aniddan.com> Co-authored-by: Clément Hallet <clement@challet.eu> Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com> Co-authored-by: Adam Charron <adam@charrondev.com> Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> Co-authored-by: Mostafa Nawara <nawaragfx@gmail.com> Co-authored-by: Cory House <housecor@gmail.com> Co-authored-by: Michael Schmidt-Voigt <michael@schmidt-voigt.de> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Sebastian Markbåge <sebastian@calyptus.eu> Co-authored-by: Minh Nguyen <minhnguyenxx@gmail.com> Co-authored-by: Dan Abramov <dan.abramov@gmail.com> Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com> Co-authored-by: Sten Arthur Laane <laanesten@gmail.com> Co-authored-by: Jeremy Wadsack <jeremy.wadsack@gmail.com> Co-authored-by: Matt Korostoff <mkorostoff@gmail.com> Co-authored-by: Hieu Do <xlu.untitled@gmail.com> Co-authored-by: Alex Krolick <alexkrolick@users.noreply.github.com> Co-authored-by: Shakib Hossain <3992124+shakib609@users.noreply.github.com> Co-authored-by: Ernesto García <gnapse@gmail.com> Co-authored-by: Eugene Chybisov <imchybisov@gmail.com> Co-authored-by: Tan Li Hau <tanhauhau@users.noreply.github.com> Co-authored-by: Maaz Syed Adeeb <maaz.adeeb@gmail.com> Co-authored-by: Sam Saccone <samccone@gmail.com> Co-authored-by: Nick McCurdy <nick@nickmccurdy.com> Co-authored-by: Evan Kennedy <evan_kennedy@yahoo.com> Co-authored-by: Ian Sutherland <ian@iansutherland.ca> Co-authored-by: Chetanya Kandhari <availchet@gmail.com> Co-authored-by: Marc Hassan <marc.j.hassan@gmail.com> Co-authored-by: Marc Hassan <marc@unqork.com> Co-authored-by: Joe Haddad <timer150@gmail.com> Co-authored-by: Brody McKee <mrmckeb@hotmail.com> Co-authored-by: Josemaria Nriagu <49484425+josenriagu@users.noreply.github.com> Co-authored-by: Jeroen Claassens <jeroen.claassens@live.nl> Co-authored-by: atlanteh <atlanteh@gmail.com> Co-authored-by: Jakob Krigovsky <jakob@krigovsky.com> Co-authored-by: Houssein Djirdeh <houssein.djirdeh@gmail.com> Co-authored-by: Burke Holland <burkeholland@gmail.com> Co-authored-by: Anuraag Agrawal <anuraaga@gmail.com> Co-authored-by: Brian Morearty <brian@morearty.org> Co-authored-by: Jeffrey Posnick <jeffy@google.com> Co-authored-by: Dylan Brookes <24858006+merelinguist@users.noreply.github.com> Co-authored-by: Michael Mok <pmmmwh@gmail.com> Co-authored-by: Rafael Quijada <firehawk09@users.noreply.github.com> Co-authored-by: Sakito Mukai <sakito21@gmail.com> Co-authored-by: Andy C <7357845+andycanderson@users.noreply.github.com> Co-authored-by: Kline Moralee <klinemoralee@gmail.com> Co-authored-by: Gerrit Alex <admin@gerritalex.de> Co-authored-by: Sam Chen <chenxsan@gmail.com> Co-authored-by: Huáng Jùnliàng <jlhwung@gmail.com> Co-authored-by: Stafford Williams <staff0rd@users.noreply.github.com> Co-authored-by: Lenard Pratt <striderman34@gmail.com> Co-authored-by: Simen Bekkhus <sbekkhus91@gmail.com> Co-authored-by: Webdot_30 <nwaforuchechukwu2007@gmail.com> Co-authored-by: Raihan Nismara <31585789+raihan71@users.noreply.github.com> Co-authored-by: Eddie Monge Jr <eddiemonge@users.noreply.github.com> Co-authored-by: Timothy <1695613+timothyis@users.noreply.github.com> Co-authored-by: Liam Duffy <3338808+liamness@users.noreply.github.com> Co-authored-by: Tobias Büschel <13087421+tobiasbueschel@users.noreply.github.com> Co-authored-by: Hongbo Miao <Hongbo.Miao@outlook.com> Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com> Co-authored-by: Clément DUNGLER <clementdungler@gmail.com> Co-authored-by: Johannes Pfeiffer <johannespfeiffer@netnexus.de> Co-authored-by: Sai <sai@pelago.com.sg>
* 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
I saw that the #7937 was added to 4.0 milestone and fix was merged. But in the release note I don't see it's mentioned. So is the fix in the 4.0.3 which is the latest version? |
@krist-jin The fix has been available from |
Seems like got fixed in v5. |
* 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
* 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
* 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
Is this a bug report?
yes
Did you try recovering your dependencies?
$ npm --version
6.9.0
Which terms did you search for in User Guide?
Irrelevant.
Environment
Steps to Reproduce
create a fresh new
create-react-app
projectinstall
node-sass
create
.env
file in the root of the directory and addSASS_PATH=node_modules:src
as mentioned in the docs (here)create an
assets
folder insrc
and add a sample svg file, saymysvg.svg
, intoassets
rename
App.css
toApp.scss
and change import inApp.js
move the
App.js
andApp.scss
file inside some directory insidesrc
, saycomponents
like sosrc
| - assets
| | - mysvg.svg
| - components
| | - App.js
| | - App.scss
import svg in
App.scss
in some class, saymyclass
, like sobackground: url('assets/mysvg.svg') 99% / 24px no-repeat rgba(0, 0, 0, 0.1);
and apply that class to some DOM element in
App.js
, like so<div className="myclass">abcd</div>
Expected Behavior
Compilation successful.
mysvg.svg
is visible on the page. This was working without any problems in my application withreact-scripts@2.1.8
. After I upgradedreact-scripts
to v3.0.1, as mentioned in the releases tab, I'm finding this.Also this happens only if
App.js
andApp.scss
are nested inside some folder insidesrc
. If they are in thesrc
folder, the problem is not seen. (This makes sense actually because it is trying to resolve modules relative to the current working directory, without respecting theSASS_PATH
in.env
file)Actual Behavior
The text was updated successfully, but these errors were encountered: