Problem: SharePoint Style wird nicht angezeigt
Problem:
Styles Elemente werden nicht angezeigt in React / VS Code
Fehlermeldung
Property
'list1' does not exist on type '{ webPart01: string; container: string; row:
string..
Lösung:
Man muss gulp build starten, damit die Elemente in den anderen
Dateien sichtbar werden
Wenn man Styles in SharePoint Webparts verwenden möchte,
dann schreibt man die styles in einer style Datei mit der Endung .module.css zusammen.
Anschließend bindet man die styles Datei ein mit import.
|
import styles from './components/WebPart01.module.scss'
|
Und später wird auf die ausgelagerten Styles zugegriffen mit
class="${styles.listItem}">
dabei wird die Auswahl der möglichen Style-Elemente per Intellisense
angezeigt
|
private _renderList(items: ISPList[]): void {
let html: string = '';
items.forEach((item: ISPList) => {
html += `
<ul class="${styles.list}">
<li class="${styles.listItem}">
<span class="ms-font-l">${item.Title}</span>
</li>
</ul>`;
});
const listContainer: Element = this.domElement.querySelector('#spListContainer');
listContainer.innerHTML = html;
}
|
Problem:
Fehlermeldung
Property
'list1' does not exist on type '{ webPart01: string; container: string; row:
string; column: string; 'ms-Grid': string; title: string; subTitle: string;
description: string; button: string; test: string; label: string; list: string;
listItem: string; }'. Did you mean 'list'?"
Lösung:
Die style Elemente werden erst erkannt, wenn man gulp serve
in vs code->NPM scriptS laufen lässt
Gesamte Fehlermeldung
Fehlermeldung
{
"resource":
"/c:/_Daten/Desktop/Demo/SharePoint/WebParts/Demos/src/webparts/webPart01/WebPart01WebPart.ts",
"owner":
"typescript",
"code": "2551",
"severity": 8,
"message": "Property
'list1' does not exist on type '{ webPart01: string; container: string; row:
string; column: string; 'ms-Grid': string; title: string; subTitle: string;
description: string; button: string; test: string; label: string; list: string;
listItem: string; }'. Did you mean 'list'?",
"source": "ts",
"startLineNumber": 117,
"startColumn": 25,
"endLineNumber": 117,
"endColumn": 30,
"relatedInformation": [
{
"startLineNumber":
15,
"startColumn":
3,
"endLineNumber":
15,
"endColumn":
24,
"message":
"'list' is declared here.",
"resource":
"/c:/_Daten/Desktop/Demo/SharePoint/WebParts/Demos/src/webparts/webPart01/components/WebPart01.module.scss.ts"
}
]
}