React-starter-kit: How do you include a CSS file from node_modules without it prefixing?

Created on 27 Jul 2016 · 8Comments · Source: kriasoft/react-starter-kit

When I do ...

import 'react-select/dist/react-select.css';

Then the css is dumped to the page but with all of the extra stuff in the name, expecting that I'll be using the withStyles method, but it's not my component and doesn't use that method. With how all of this is configured, how can I bypass the renames?

Would it be a good idea to modify this starter kit to have a css loader for anything in the node_modules directory where it doesn't do all the class renaming since components asking you to include their css this way is common and the current set up breaks the css.

CSS question

Source

nuclearspike

Most helpful comment

Replace postcss-import with postcss-partial-import and use like so:

/* YourStyles.css */
:global {
  @import 'react-select/dist/react-select.css';
  /* or @import '~/react-select/dist/react-select.css' */
  /* or @import '../../../node_modules/react-select/dist/react-select.css' */
}

frenzzy on 30 Jul 2016

👍4

All 8 comments

Replace postcss-import with postcss-partial-import and use like so:

/* YourStyles.css */
:global {
  @import 'react-select/dist/react-select.css';
  /* or @import '~/react-select/dist/react-select.css' */
  /* or @import '../../../node_modules/react-select/dist/react-select.css' */
}

frenzzy on 30 Jul 2016

👍4

Thanks! I'll try this out.

Paul

On Saturday, July 30, 2016, Vladimir Kutepov [email protected]
wrote:

Replace postcss-import
https://github.com/kriasoft/react-starter-kit/blob/89ac3c43fe16a584842759f27c543e2d602972fb/tools/webpack.config.js#L152
with postcss-partial-import
https://github.com/jonathantneal/postcss-partial-import and use like so:

/* YourStyles.css */
:global {
@import 'react-select/dist/react-select.css';
}

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/kriasoft/react-starter-kit/issues/771#issuecomment-236359383,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABGSlp3l7oTcH4q1HOU1qkBkGwLf8cetks5qay__gaJpZM4JV0-t
.

nuclearspike on 30 Jul 2016

I'm also trying to load react-select.css and it does not works because of the prefixes.
I tried what @frenzzy suggested but had no success

Any other ideas?

rafaelcorreiapoli on 3 Aug 2016

Alternatively you can attach external styles in the <head> section of your html.
For example you can add link to CDN before this line

<link rel="stylesheet" href="https://npmcdn.com/react-select/dist/react-select.css" />

or see another examples here and here

frenzzy on 3 Aug 2016

Switching to postcss-partial-import in webpack and using the :global @import didn't work for me either.

The problem with the link to CSS as shown in the comment above this:

By not referencing the version, if the newest release of a 3rd party package has breaking changes your site gets broken until you upgrade the package. You'll want to do a hard reference to the version.
But now for every package that needs CSS without prefixing you'll have to manually keep the references up to date as you upgrade.

nuclearspike on 15 Aug 2016

it works for me to add
@import '~bootstrap/dist/css/bootstrap';
@import '~bootstrap/dist/css/bootstrap-theme';
in core.scss