typescript - 如何使 "import * as style from from X.less"工作？

Question

我最近遇到了这段代码:

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

我不明白其中的魔力，但我喜欢它。这很酷。但是，如果我可以使用 .less 文件进行这项工作，那就更酷了。这可能吗？

使用 Typescript + React + Webpack。

Answer 1

你需要一个 loader为了使 Webpack 导入 .js 文件以外的文件。 Loader 将文件转换为 JS 代码，以便 Webpack 可以导入它。当您尝试导入 .less 文件时，您需要 less-loader (将 Less 转换为 CSS)，css-loader (解析 CSS 代码)和 style-loader或 mini-css-extract-plugin (使 bundle 将 CSS 代码注入(inject)页面)。

首先使用 NPM 安装加载器(在终端中运行):

npm install less-loader css-loader style-loader

然后告诉 Webpack 你想为 .less 文件使用这些加载器:向你的 webpack.config.js 添加规则:

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

然后告诉 TypeScript 你的 .less 文件是什么类型。为此，在您的项目文件中找到或创建一个 .d.ts 文件(例如 src/global.d.ts)并在其中添加以下代码:

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

因此 TypeScript 会知道您示例中的 style 变量是一个字符串映射。但是您需要稍微更改导入代码:

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

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

您可以在 the official Webpack+Less tutorial 中找到更多信息.