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.

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.

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

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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