Requested priority: (Blocking, High, Normal, Low) : High

Describe the issue:

I have created a sharepoint react framework solution.This solution uses List Component.I now want to use the (https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.scss) in my solution. @import '../../../common/common';

:global { .ms-ListBasicExample-itemCell { @include focus-border();

min-height: 54px;
padding: 10px;
box-sizing: border-box;
border-bottom: 1px solid $bodyDividerColor;
display: flex;


.ms-ListBasicExample-itemCell:hover { background: #EEE; }

.ms-ListBasicExample-itemImage { flex-shrink: 0; }

.ms-ListBasicExample-itemContent { @include margin-left(10px); overflow: hidden; flex-grow: 1; }

.ms-ListBasicExample-itemName { @include ms-font-xl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ms-ListBasicExample-itemIndex { font-size: $ms-font-size-s; color: $ms-color-neutralTertiary; margin-bottom: 10px; }

.ms-ListBasicExample-chevron { align-self: center; @include margin-left(10px); color: $ms-color-neutralTertiary; font-size: $ms-font-size-l; flex-shrink: 0; } } So i created a file called list.module.scss and copied the code above. But it gives an error image

Any help will be appreciated.


The Office Fabric UI team has done a wonderful job, but they certainly didn't make the examples easy to use!

The ListBasicExample SCSS is a good example of this.

Here's how to get the example to work -- assuming that you are attempting to use the example inside of a React SPFx project:

  1. Copy and paste the content of List.Basic.Example.scss into the SCSS that was created with your SCSS (e.g.: YourSolutionName.module.scss)

  2. Find and remove the line that imports the common.scss

@import '../../../common/common'; #REMOVE!

  1. Make sure that at the top of your SCSS, you have the following line (add it if you don't have it):

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

  1. From the SCSS you copied and pasted, find all the @import instructions and prefix all imports with ms-. For example, @include focus-border(); will become

@include ms-focus-border();

  1. At the top of your SCSS, just below the @import '~@Microsoft/sp-office-ui...' paste the following line:

$bodyDividerColor: "[theme:bodyDivider, default: #c8c8c8]";

And that should be it!

The mixins your example is looking for are already defined in the core Office Fabric UI scss -- they are just prefixed with ms-. The color that we add at the end is defined in another SCSS called _semanticSlots.scss; instead of importing the whole thing (and introduce more issues), I've just copied the definition.

I hope it helps?!

  • Hi Thank you for the reply , it worked but a change which is replaced line "@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';" with @import '~office-ui-fabric-react/dist/sass/Fabric.scss'; .This is because as per microsoft best practices it is good to use css from React as both work differently.Correct me if i am wrong as this is a learning curve for everyone. and also not to forget to name the file as [filename].module.scss – user24778 Apr 10 '18 at 9:46

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.