React-starter-kit: Styles from External files are not being inserted into HTML file

[manoj150283]

I am having a Style folder containing .scss files in /src folder

In App.js, I am importing all the styles from styles folder like this:

My webpack.config.js looks like this:

postcss.sass.js file

My login.js file look like this

My css are getting loaded into client.js file

But it is not getting inserted into html file.

Please help and advice.

[frenzzy]

You need to insert them manually. For example if you want that you're styles appears on all pages, just do something like this in src/components/Layout/Layout.js:

import bootstrap from '../styles/bootstrap.scss';
import ui from '../styles/ui.scss';
import s from './Layout.css';

// ...

export default withStyles(bootstrap, ui, s)(Layout);

[manoj150283]

Thank you @frenzzy :) I have one question though. In this case all styles will appear on all pages irrespective it is used or not. Is there any workaround for this ? Is there any other way to insert only used css on the html ?

[frenzzy]

Sure, for example, if you want only button styles to appear on the page, import them inside react Button component, and when you use the button on the page, its styles will automatically be added to the page and removed when all the buttons disappear.

/* src/components/RedButton/RedButton.css */
.root {
  border: 0;
  background: red;
  color: white;
}

```js
/* src/components/RedButton/RedButton.js */
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './RedButton.css'; // <= button styles

class RedButton extends React.Component {
render() {
return }
}

export default withStyles(s)(RedButton); // <= apply button styles if necessary

```js
/* src/routes/login/Login.js */

// ...
<RedButton>Log In</RedButton>
// ...

[manoj150283]

@frenzzy Thank you for your suggestion.

[shyaaam]

@frenzzy , So much thanks for the solution. The doc needs to be specific about this for newbies.