'How to make Visual Studio Code show errors when using missing SCSS styles in a React app?
In my React app I import styles from a SCSS file like this:
import styles from './index.module.scss';
To use a particular SCSS style I set up a className on a component and grab a style from a styles array:
<span className={styles['product-price__sign--negative']}>
When I will make a typo in the class name like this:
<span className={styles['product-price__sign--neg']}>
There is no SCSS style of this type in the styles file. In this case, Visual Studio Code should show an error indicating I am trying to use a style that is missing.
However, it does not happen, and I don't see any warning or error.
What to do to make Visual Studio Code show a warning/error when I am using a style that is missing in the SCSS file when coding with React ?
Solution 1:[1]
Will this extension help ? - [https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss]
Solution 2:[2]
You could install eslint module and this package: eslint-plugin-react-css-modules It shows you if your scss classes doesn't exist
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Javvy7 |
| Solution 2 | JMC |