typescript - Wie mache ich, dass „import * as style from X.less“ funktioniert?

Ich bin kürzlich auf diesen Code gestoßen:

import * as style from './style.css';

Ich verstehe die dabei verwendete Magie nicht, aber ich mag es. Es ist cool. Aber es wäre cooler, wenn ich das mit .less-Dateien zum Laufen bringen könnte. Ist das möglich?

Verwendung von Typescript + React + Webpack.

Antwort #1

Du benötigst einen Loader, um Webpack zu ermöglichen, Dateien anderes als .js-Dateien zu importieren. Ein Loader konvertiert eine Datei in JS-Code, sodass Webpack sie importieren kann. Wenn du versuchst, eine .less-Datei zu importieren, benötigst du less-loader (um Less in CSS zu konvertieren), css-loader (um den CSS-Code zu parsen) und style-loader oder mini-css-extract-plugin (um das Bundle den CSS-Code auf der Seite einfügen zu lassen).

Installieren Sie zuerst die Loader mit NPM (im Terminal ausführen):

npm install less-loader css-loader style-loader

Dann sagen Sie Webpack, dass Sie diese Loader für .less-Dateien verwenden möchten: Fügen Sie eine Regel zu Ihrer webpack.config.js hinzu:

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
};

Sag TypeScript dann, welchen Typ deine .less-Dateien haben. Um dies zu tun, finde oder erstelle eine .d.ts-Datei (z. B. src/global.d.ts) innerhalb deiner Projektdateien und füge dort den folgenden Code hinzu:

declare module '*.less' {
  const classes: {[key: string]: string};
  export default classes;
}

Infolgedessen wird TypeScript wissen, dass die style-Variable aus deinem Beispiel eine Karte von Zeichenketten ist. Aber du musst den Importcode ein wenig ändern:

import style from './style.less';
const cssClass = style.someClass;

// Or just this to inject the CSS code to your bundle
import './style.less';

Sie können weitere Informationen im offiziellen Webpack+Less-Tutorial finden.