Problem with changing in the scss file

Question

I am facing problems that I can't change the scss file which is there when you create a SPFx webpart in React.

When I try to change color of the webpart nothing happens. I am building an RSS Feed in SPFx.

I will add a part of the code snippet in the tsx file.

RssApp.tsx:

import styles from '../RssApp.module.scss';
    let newsElement = (element: IRssItem)=> { //Newly added
        return (
              <div className = {styles.row} >
                  <div className={styles.myTitle} style={{fontSize: '30px'}}>{element.title}</div>
                  <div className={ styles.description }>{element.description}</div>

                  <div>{element.author}</div>
              </div>
        );
    };

    return (
      <div className = {styles.column}>

          <DefaultButton
            data-automation-id="test"
            text="Settings"
            onClick={this._showPanel}
          /> 
          {this.state.items.map(newsElement)}
          {settingsPanel}
      </div>


    );

the scss file:

RssApp.module.scss(As you see I have commented out the original code and added a new class (myTitle) to see if it works):

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



 .rssApp {
     .myTitle{
        background-color: blue;
      }
//   .container {
//     max-width: 800px;
//     margin: 0px auto;
//     box-shadow: 0 2px 4px 0 rgba(90, 21, 21, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
//   }

//   .row{
//     background-color: blue;
//   }

//   .row {
//     background-color: black;
//   }

//   .column {
//     @include ms-Grid-col;
//     @include ms-lg10;
//     @include ms-xl8;
//     @include ms-xlPush2;
//     @include ms-lgPush1;

//   }

//   .title {
//     @include ms-font-l;
//     @include ms-fontColor-white;
//     background-color: $ms-color-themePrimary;
//   }

//   .subTitle {
//     @include ms-font-l;
//     @include ms-fontColor-white;
//   }

//   .description {
//     @include ms-font-l;
//     @include ms-fontColor-white;
//   }

//   .button {
//     // Our button
//     text-decoration: none;
//     height: 32px;

//     // Primary Button
//     min-width: 80px;
//     background-color: $ms-color-themePrimary;
//     border-color: $ms-color-themePrimary;
//     color: $ms-color-white;

//     // Basic Button
//     outline: transparent;
//     position: relative;
//     font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
//     -webkit-font-smoothing: antialiased;
//     font-size: $ms-font-size-m;
//     font-weight: $ms-font-weight-regular;
//     border-width: 0;
//     text-align: center;
//     cursor: pointer;
//     display: inline-block;
//     padding: 0 16px;

//     .label {
//       font-weight: $ms-font-weight-semibold;
//       font-size: $ms-font-size-m;
//       height: 32px;
//       line-height: 32px;
//       margin: 0 4px;
//       vertical-align: top;
//       display: inline-block;
//     }
//   }

 }

As you see, I have added a new class called myTitle and added to the styles RssApp.module.scss.ts:

/* tslint:disable */
require("./RssApp.module.css");
const styles = {
  rssApp: 'rssApp_9a4695d5',
  container: 'container_9a4695d5',
  row: 'row_9a4695d5',
  column: 'column_9a4695d5',
  'ms-Grid': 'ms-Grid_9a4695d5',
  myTitle: 'myTitle_9a4695d5',
  //title: 'title_9a4695d5',
  subTitle: 'subTitle_9a4695d5',
  description: 'description_9a4695d5',
  button: 'button_9a4695d5',
  label: 'label_9a4695d5',
};

export default styles;
/* tslint:enable */

But still no change to my RSS Feed:

Would appreciate if someone could help me. Thanks

Now when I make following changes: RssApp.tsx

    let newsElement = (element: IRssItem)=> { //Newly added
        return (
              <div className = {styles.rssApp}>
                <div className = {styles.row} >
                  <div className={styles.myTitle} style={{fontSize: '30px'}}>{element.title}</div>
                  <div className={ styles.description }>{element.description}</div>

                  <div>{element.author}</div>
                </div>
              </div>
        );
    };

    return (
      <div className={styles.rssApp}>
        <div className = {styles.column}>

          <DefaultButton
            data-automation-id="test"
            text="Settings"
            onClick={this._showPanel}
          /> 
          {this.state.items.map(newsElement)}
          {settingsPanel}
        </div>
      </div>

    );

And RssApp.module.scss:

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

     .rssApp{
        width: 100%;
        padding: 10px;
        background-color: black;

        .myTitle{
          color: red;

        }
      }

But instead I get the SPFx standard blue color as background color even though I haven't chosen that color in my scss:

What am I doing wrong or missing out?

I would suggest following items to double check: #1. Caching of css files. CSS files are cached by most of the browsers, please check if this is not the case. And, #2. It seems some extra characters are being appended to the style names once the web part is deployed. In this case change you css file to use selectors,like: [class^="rssApp-"], [class*=" rssApp-"] { background-color: blue; } — UBK, Jun 3, 2019 at 15:30

ThinkB4Code · Accepted Answer · 2019-06-03 15:50:36Z

2

As I was going through your code, I see you are missing adding top level class to wrapper container. Dont get confused here, the SCSS works in a similar way as CSS. When you nest css classes in SCSS file, it means they will follow the HTML DOM hierarchy. See the below explanation:

SCSS File Content:

.rssApp {
     width: 100%;
     padding: 10px;

     .myTitle{
        background-color: blue;
      }
}

This SCSS code will be transpiled to following CSS code:

.rssApp {
    width: 100%;
    padding: 10px;
}

.rssApp .myTitle {
    background-color: blue;
}

This means, in order to apply css to myTitle class you need to have rssApp class as its parent. Which is missing from the code I see you had written. So if you update line number 4 on RssApp.tsx file from {styles.row} to {styles.rssApp}, it will start addressing all the css changes you make for myTitle class.

answered Jun 3, 2019 at 15:50

ThinkB4Code

2,95011 silver badges26 bronze badges

Now in wrote my scss file like this: ` .rssApp{ width: 100%; padding: 10px; background-color: black; .myTitle{ color: red; }`
– kelank
Jun 3, 2019 at 22:58
RssApp.tsx: ``` let newsElement = (element: IRssItem)=> { //Newly added return ( <div className = {styles.rssApp}> <div className = {styles.row} > <div className={styles.myTitle} style={{fontSize: '30px'}}>{element.title}</div> <div className={ styles.description }>{element.description}</div> <div>{element.author}</div> </div> </div> ); }; ```
– kelank
Jun 3, 2019 at 23:01
but I get the SPFx standard blue background color even though I never wrote that color anywhere in my code
– kelank
Jun 3, 2019 at 23:02
Hi @kelank as I read your code, it looks fine now. I guess there is some issue with import statement or with solution structure. I had create a github solution for you. Please read the instruction first. github.com/thinkb4code/scssBootstrap
– ThinkB4Code
Jun 4, 2019 at 17:44

Add a comment |

Hugo Bernier · Accepted Answer · 2019-06-03 18:57:07Z

Kelank,

I think you may be experiencing issues because you need to add an element and give it the .rssApp class name. For example, try this:

import styles from '../RssApp.module.scss';
    let newsElement = (element: IRssItem)=> { //Newly added
        return (
              <div className = {styles.row} >
                  <div className={styles.myTitle} style={{fontSize: '30px'}}>{element.title}</div>
                  <div className={ styles.description }>{element.description}</div>

                  <div>{element.author}</div>
              </div>
        );
    };

    return (
<div className={styles.rssApp}>
      <div className = {styles.column}>

          <DefaultButton
            data-automation-id="test"
            text="Settings"
            onClick={this._showPanel}
          /> 
          {this.state.items.map(newsElement)}
          {settingsPanel}
      </div>
</div>
    );

The lines I have added are:

<div className={styles.rssApp}>

and a closing </div>

Stack Exchange Network

Problem with changing in the scss file

2 Answers 2

Your Answer

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

Linked

Hot Network Questions

Problem with changing in the scss file

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

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

Linked

Related

Hot Network Questions

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