在打字稿中使用css模块时出错，与webpack config发生反应

问题描述

实际上还有一个类似的问题：How do I fix typescript compiler errors on css files?

所以我正试图在打字稿中导入css模块，如下所示：

import * as styles from "./App.css";

//App.tsx return some jsx:

<h3 className={styles["background"]}>CSS Here</h3>

// ./App.css

.background {
    background-color: pink;
}

我已经为webpack安装了css-loader和style-loader，另外还安装了“ css-modules-typescript-loader”软件包：https://www.npmjs.com/package/css-modules-typescript-loader

“ css-modules-typescript-loader”将在下面自动生成一个新文件：

// /App.css.d.ts
interface CssExports {
  'background': string;
}
export const cssExports: CssExports;
export default cssExports;

这是我的webpack.config.ts：

import * as path from "path";
import * as webpack from "webpack";
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

const config: webpack.Configuration = {
  entry: "./src/index.tsx",module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,exclude: /node_modules/,use: {
          loader: "babel-loader",options: {
            presets: [
              "@babel/preset-env","@babel/preset-react","@babel/preset-typescript",],},{
        test: /\.css$/,use: [
          "css-modules-typescript-loader",{
            loader: "css-loader",options: {
              modules: true,resolve: {
    extensions: [".tsx",".ts",".js"],output: {
    path: path.resolve(__dirname,"build"),filename: "bundle.js",devServer: {
    contentBase: path.join(__dirname,compress: true,port: 4000,plugins: [
    new ForkTsCheckerWebpackPlugin({
      async: false,eslint: {
        files: "./src/**/*",}),};

export default config;

问题是当我启动npm时，css模块似乎没有导出，并且我不断收到“ [未知]解析错误：预期的声明或声明”：

如何正确导入css模块？ 解析错误可能来自我使用的其他某些软件包（大礼包/漂亮）吗？

任何提示都会有所帮助，谢谢。

解决方法

关于类型，您可以通过删除名称空间导入来解决，因为生成的类型现在正在导出默认值。您只需简单地将其导入为默认导入：

import styles from "./App.css";

<h3 className={styles["background"]}>CSS Here</h3>

此外，为了使CSS附加在文档中，您可能必须使用style-loader。

对于解析错误，它最有可能与您的短绒有关，因此请尝试看看设置它的方式。