如何导入 CSS 模块打字，反应和 Webpack

如何导入 CSS 模块的类型与 Webpack？

  1. 为 CSS 生成(或自动生成) .d.ts文件? 使用经典的类型 import语句? 使用 ./styles.css.d.ts:

    import * as styles from './styles.css'

  2. Import using require Webpack function?

    let styles = require("./styles.css");

But for the last approach I must define the require function.

What is the best approach or best option and one that can also handle IntelliSense for the CSS file definitions and classes?

139299 次浏览
小开

let styles = require("./styles.css");是最好的方法，因为它是 javascript 的 es5版本，兼容 react.import * as styles from './styles.css'是 javascript 的 es6版本。

小开

或导入使用需要的 webpack 功能

这正是我 用过要做的事情，并且在我的一些项目中仍然有这些代码。

现在: 我写了 typestyle: http://typestyle.github.io/#/，但是你不必用它。如果能让你开心的话，就坚持用 const styles = require('./styles.css')吧。FWIW 如果你想要 http://typestyle.github.io/#/raw，你也可以使用带有字体的原始 css

小开

A)正如你所说，使用 要求有一个最简单(不是最好)的选项:

const css = require('./component.css')
  • 我们需要为 require打字，因为它不是标准的功能在打字稿。

  • 针对这一特定要求的最简单的输入可能是:

    declare function require(name: string): string;

  • Webpack will then compile typescript and use modules properly - BUT without any IDE help and class names checks for build.

B) There is better solution to use standard import:

import * as css from './component.css'
  • 启用完整的 类名为 IntelliSense
  • 需要为每个 css 文件定义类型，否则 tsc编译器将失败

对于正确的 IntelliSense，Webpack 需要为每个 css 文件生成类型定义:

  1. 使用 webpack < a href = “ https://github.com/Jimdo/typeings-for-css-module-loader”rel = “ noReferrer”> typeings-for-css-module-loader

    webpackConfig.module.loaders: [
{ test: /\.css$/, loader: 'typings-for-css-modules?modules' }
{ test: /\.scss$/, loader: 'typings-for-css-modules?modules&sass' }
];

  2. Loader will generate *.css.d.ts files for each of css files in your codebase

  3. Typescript compiler will understand that css import will be module with properties (class names) of type string.

Mentioned typings-for-css-loader contains a bug and because of types file generation delay, it's best to declare global *.css type in case our *.css.d.ts file is not generated yet.

That little bug scenario:

  1. Create css file component.css
  2. Include it in component import * as css from './component.css'
  3. Run webpack
  4. Typescript compiler will try to compile code (ERROR)
  5. Loader will generate Css modules typings file (component.css.d.ts), but it's late for typescript compiler to find new typings file
  6. Run webpack again will fix build error.

Easy fix is to create global definition (eg. file called typings.d.ts in your source root) for importing CSS Modules:

declare module '*.css' {
interface IClassNames {
[className: string]: string
}
const classNames: IClassNames;
export = classNames;
}

如果没有生成 css 文件，将使用此定义(例如，您添加了新的 css 文件)。否则将使用生成的特定 (需要在相同的文件夹和命名相同的源文件 + .d.ts扩展名)，例如。component.css.d.ts定义和智能感知将完美工作。

component.css.d.ts的例子:

export const wrapper: string;
export const button: string;
export const link: string;

如果您不想看到生成的 css 类型，您可以在 IDE 中设置过滤器来隐藏所有带扩展名的文件。在你的消息来源中发现了 CSSD。

小开

我已经在我的 ./src文件夹中添加了一个名为 Global.d.ts或 typings.d.ts的文件，其中包含一些类型定义:

declare module "*.module.css";

Webpack css 配置:

{
test: /\.css$/,
use: [
isProductionBuild ? MiniCssExtractPlugin.loader : "style-loader",
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
},

然后我简单地导入模块，比如: import styles from "./App.module.css";

小开

我认为现在打印脚本可以导入 css 文件，只需要做 Import‘ fileTobeImportdPath.css’

小开

这个案例与 Typecript 有关。你可以在你的项目中添加 typings.d.ts，内容如下:

declare module "*.module.css";
declare module "*.module.scss";

如果您想启用 CSS 模块，使用 *.module.*格式的文件名是一个很好的实践。

css-loader 将为满足此 RegEx: /\.module\.\w+$/i的名称的文件自动启用 CSS 模块。通过将 options.modules属性设置为对象，可以自定义此特性。

例如:

import style from './App.module.css'; // CSS Module enabled
import './index.css'; // Plain CSS loaded

对于最近的配置，您可以将此规则添加到 webpack.config.js:

{
test: /\.css$/,
use: [
'style-loader',
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[hash:base64]", // default
auto: true // default
},
sourceMap: true
}
},
]
},

一个自定义配置示例:

{
loader: "css-loader",
options: {
modules: {
localIdentName: "[name]_[local]_[hash:base64]", // custom class name format
auto: /\.cmod\.\w+$/i, // custom auto enable CSS Module for "*.cmod.css" format
},
}
},

完整的文档是 给你。

小开

现在到了2021年，你所需要做的就是在你的项目中添加一个 src/Globals.d.ts，它的代码如下:

declare module "*.module.css";
declare module "*.module.scss";
// and so on for whatever flavor of css you're using

然后安装并添加

{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}

敬你的蛋糕。

在进行简单更改后，VS 代码中正确运行的示例(root 是在我的样式表中定义的类) :

enter image description here

Webpack 和 tsc 也可以在命令行上正确编译。

小开

在2022年，我所需要做的就是将 Globals.d.ts文件添加到 src文件夹下
和

declare module "*.module.css";
declare module "*.module.scss";

然后我可以像往常一样在我的打印文件中导入 CSS 模块，用于 CSS 或 scss 文件:

import styles from "./Team.module.scss";

提交答案