Skip to content
This repository was archived by the owner on Oct 19, 2022. It is now read-only.
This repository was archived by the owner on Oct 19, 2022. It is now read-only.

Global styles from third party library are not applied properly #53

@RusinovAnton

Description

@RusinovAnton

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions