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 ?