create-react-app icon indicating copy to clipboard operation
create-react-app copied to clipboard

Global styles from third party library are not applied properly

Open RusinovAnton opened this issue 6 years ago • 0 comments

Is this bug?

Yes

Reproduce bug

Repository with bug example: https://github.com/RusinovAnton/cra-global-styles-bug-example

Problem Description

I've just tried to use react-table and import styles for it the way it described in README

There are two problems with it:

  • Import path - if I use styles as it described in README
:global {
  @import '~react-table/react-table.css';
}

then it fails to import because CRA configured for absolute paths root to be src/ so I get following error:

Module not found: Can't resolve '~react-table/react-table.css' in '/Users/rusinov/projects/nodus/cra-global-styles-bug/src/components/App'
  • Styles imported as CSS modules - When I fix import by removing "~" char from import path I get styles loaded on page but they are transformed as CSS modules.
:global {
  @import 'react-table/react-table.css';
}

image

Expected behavior

Third party styles are not transformed as CSS modules when imported within :global directive

RusinovAnton avatar Sep 20 '18 11:09 RusinovAnton