Put my .scsc file with my component

[youbihi]

Hello,

I am trying to use keystone4-universal-react for a personal project. I am of course a junior dev trying to learn: reactjs, nodejs and KeystoneJS 4.

I would like to structure my project to be able to have a component that has its .scss file in the same folder like this:

`import React, { Component } from 'react'; import PropTypes from 'prop-types'; import styles from './star.scss';

const Star = ({ selected = false, onClick = f => f }) => < div className={(selected) ? styles.star.selected : styles.star } onClick={onClick} > </ div >

Star.propTypes = { selected: PropTypes.bool, onClick: PropTypes.func }

export default Star;`

my .scss file would look like this:

` .star { cursor: pointer; height: 25px; width: 25px; margin: 2px; float: left; background-color: grey; clip-path: polygon( 50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38% ); }

.star.selected { background-color: red; }`

what do I need to change in the code so that it works ? webpack.config.js ?

for now I have a error: `Unexpected token (2:0) 1 |

2 | .star { | ^ 3 | cursor: pointer; 4 | height: 25px; 5 | width: 25px;`

Can you please help ?

[youbihi]

Is there someone to help me please ?