0

I have created SPFx solution which contains multiple webparts (Four webparts in 1 solution). All the webparts design are similar but with different logic.

Right now, I have created a duplicate file in all webparts, but I do not want to create duplicate css in different webparts, I want to make common scss file for the entire solution and use in entire solution (all webparts). How can I create common scss file and use in my all webparts in the solution.

Improve this question

2 Answers 2

Reset to default
2

Krunal,

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 shared or common folder under the src folder. For this example, I'll used shared 2. In the shared folder, create a new file and name it shared.module.scss 3. Copy the content of one of your web part's SCSS module into the newly created shared.module.scss 4. Repeat the following steps for each web part: 4.1. Replace the content of the [webpart].module.scss with @import '../../shared/shared.module.scss'; 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 webpart1, 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?

Improve this answer
2
  • Hugo, I've used your solution and added only the global piece I wanted onto the shared.module.scss as I wanted only the global piece to be shared and the webparts having their own css "locally", is that considered a bad practice?
    – André Alves
    Commented Mar 11, 2020 at 16:24
  • No, I'd say that's a pretty good approach. You can either import the CSS in code (as illustrated above), or if you are familiar with SCSS, you can import the shared SCSS in your individual SCSS modules for each web part using the @import statement.
    – Hugo Bernier
    Commented Mar 16, 2020 at 21:23
0

Have you tried creating a common "base" scss and import using the @import statement?

Have a look at the Recommendations for working with CSS in SPFx and especially how office-ui-fabric can be imported in a WebPart.

Improve this answer
2
  • I'm new to SPFx, so I don't have much idea.
    – Krunal Patel
    Commented May 29, 2019 at 10:06
  • Have you read the documents I referenced?
    – Nils
    Commented May 29, 2019 at 10:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.