search

wellyshen / react-cool-starter

😎 🐣 A starter boilerplate for a universal web app with the best development experience and a focus on performance and best practices.
MIT License
1.31k stars 242 forks source link

importing scss from node_modules causes build to fail #236

Closed amitava82 closed 5 years ago

amitava82 commented 5 years ago

Bug

Importing a scss (eg, bootstrap) fails with error 

 Rendering routes error: Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.

This happens when import is done in lazy loaded component. How to reproduce:

  1. add @import "~bootstrap/scss/bootstrap"; at the top of pages/UserInfo/styles.scss
  2. directly navigate to http://localhost:3000/UserInfo/1 or refresh page. It'll show "Not Found :(" and above error in console.

Seems to work if imported to top level component or index route component.

wellyshen commented 5 years ago

@amitava82 Yup, it's better to import global style in top level. Anything I can help you?

amitava82 commented 5 years ago

Should be able to import scss from node_nodules relavant for each chunk. This seems to be a bug that importing from node modules fails but not for Local scss files. Importing everything in single file isn't optimal for a large app.

On Sun, Aug 18, 2019, 8:47 PM Welly notifications@github.com wrote:

@amitava82 https://github.com/amitava82 Yup, it's better to import global style in top level. Anything I can help you?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/wellyshen/react-cool-starter/issues/236?email_source=notifications&email_token=AAJYMKWVOUXXBUWDTTX3DGLQFFRX3A5CNFSM4IMEAUF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4RCCPA#issuecomment-522330428, or mute the thread https://github.com/notifications/unsubscribe-auth/AAJYMKTPAW4VZ4QHBKUBEBTQFFRX3ANCNFSM4IMEAUFQ .

wellyshen commented 5 years ago

@amitava82 I will check it.

wellyshen commented 5 years ago

@amitava82 I can import bootstrap.scss from UserInfo.scss without building error, plz see here

amitava82 commented 5 years ago

@wellyshen Nope, I tried your branch, it does not work. navigate to http://localhost:3000/UserInfo/1 and then hit refresh browser.

Screenshot 2019-08-23 at 3 33 51 PM

wellyshen commented 5 years ago

@amitava82 How did you try my branch? I didn't see error on http://localhost:3000/UserInfo/1

amitava82 commented 5 years ago

Usual git clone and check out your bootstrap branch

On Sun, Aug 25, 2019, 12:21 PM Welly notifications@github.com wrote:

@amitava82 https://github.com/amitava82 How did you try my branch?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/wellyshen/react-cool-starter/issues/236?email_source=notifications&email_token=AAJYMKVJ2HQ2TPG6JIEIRPLQGITWDA5CNFSM4IMEAUF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5CNVEY#issuecomment-524606099, or mute the thread https://github.com/notifications/unsubscribe-auth/AAJYMKSHNPZVCTSWWGGO3OLQGITWDANCNFSM4IMEAUFQ .

wellyshen commented 5 years ago

@amitava82 So wired... May I know your environment? e.g. node version, OS etc.

amitava82 commented 5 years ago

node v8.15.1, OSX latest.

wellyshen commented 5 years ago

@amitava82 Can you try it with higher node.js version (see doc)

amitava82 commented 5 years ago

Used v12.1.0, but no luck.

hienhuynhtm commented 5 years ago

@amitava82 how about removing ~ character. In my project, I just use like below and it works import '@package/folder_name/dist/ace.css';

amitava82 commented 5 years ago

Yeah importing like so @import 'node_modules/bootstrap/scss/bootstrap'; works.