Posible problem with SPFx V1.0

Question

In the instructions for HelloWorld WebPart "Connect to SharePoint" under the heading "Retrieve List Data" is the following code :-

<div class="${styles.column}">
  <span class="${styles.title}">
    Welcome to SharePoint!
  </span>
  <p class="${styles.subtitle}">
    Customize SharePoint experiences using Web Parts.
  </p>
  <p class="${styles.description}">
    ${escape(this.properties.description)}
  </p>
  <p class="${styles.description}">
    ${escape(this.properties.test2)}
  </p>

Unfortunately, styles.title, styles.subtitle, styles.description are not defined in HelloWorld.module.sccs So will not compile.

How do I fix this. If I try and use the RC0 version, then it fails to compile :-

.title {
 @include ms-font-xl;
 @include ms-fontColor-white;
  }

fails to compile -

Error: no mixin named ms-font-l

           Backtrace:
            src/webparts/helloWorld/HelloWorld.module.scss:20
            on line 20 of src/webparts/helloWorld/HelloWorld.module.scss
    >>   @include ms-font-l;

How do I fix this ?

Answer 1

This is because those classes are missing from the HelloWorld.module.scss file. I just added dummy classes and it compiled. Below are the classes I added. Note that this renders the information but not with the styling that is shown in the example. Once you have the relevant styling just add it to the relevant classes below. - M

.column {
    padding: 10px;
  }

  .title {
    color: #333333;    
  }

  .subtitle {
    color: #333333;    
  }

  .description {
    color: #333333;    
  }

Answer 2

Thanks to Vesa Juvonen - There was a typo in "Connect your client-side web part to SharePoint (Hello world part 2)" the first piece of code - here is the corrected code :-

this.domElement.innerHTML = `
  <div class="${styles.helloWorld}">
    <div class="${styles.container}">
      <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
        <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
          <span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
          <p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
          <p class="ms-font-l ms-fontColor-white">${escape(this.properties.description)}</p>
          <p class="ms-font-l ms-fontColor-white">Loading from ${escape(this.context.pageContext.web.title)}</p>
          <a href="https://aka.ms/spfx" class="${styles.button}">
            <span class="${styles.label}">Learn more</span>
          </a>
        </div>
      </div>
    </div>  
    <div id="spListContainer" />
  </div>`;

this._renderListAsync();