Question

我最近遇到了以下代码：

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

我不了解其中涉及的魔术，但我喜欢它。这个很酷。但是，如果我可以使用.less文件来完成这项工作，那将会更酷。这可能吗？

使用Typescript + React + Webpack。

Answer 1

您需要loader才能使Webpack导入.js文件以外的文件。加载程序将文件转换为JS代码，以便Webpack可以导入它。在尝试导入.less文件时，您需要less-loader（将Less转换为CSS），css-loader（以解析CSS代码）以及style-loader或{{3 }}（使分发包将CSS代码注入页面）。

首先使用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';

您可以在mini-css-extract-plugin中找到更多信息。

如何使“从X.less导入*作为样式”工作？

1 个答案: