It can be a bit daunting to become familiar with the SPFx project structure, but I hope that these instructions will help.
To create a base SCSS that is used by all web parts:
1. Create a
common folder under the
src folder. For this example, I'll used
2. In the
shared folder, create a new file and name it
3. Copy the content of one of your web part's SCSS module into the newly created
4. Repeat the following steps for each web part:
4.1. Replace the content of the
4.2 Perform a
gulp build and
gulp serve and test to make sure everything works.
Note that your default CSS class names will usually match the web part's class name. If your web part is called
webpart1, your SCSS module will probably define a
webpart1 CSS class name. Next web part will be
webpart2, and so on.
If you use shared styles, you'll probably want to go through your web parts and make sure to point to your common CSS class names instead. For example, instead of
webpart1, you may use
mywebpart and replace
webpart2 within each web part.
Note that this approach gives you the ability to have common styles while still being able to define unique styles for each web part. For example, you could override a style in one of your
[webpart].module.scss for a given web part.
At "compile" time, SCSS will combine the common styles (through the
@import) and your overwritten styles, giving each web part their own CSS.
If you absolutely don't need custom styles for any web parts and all your styles are shared, you can simply remove the individual
[webpart].module.scss and change your web part's
[component].tsx to use the shared SCSS directly as follows:
//import styles from './HelloWorldWebPart.module.scss';
import styles from '../../shared/shared.module.scss';
I hope this helps?