Webpack 似乎无法加载 css

Question

我正在尝试为单个 .tsx 组件创建一个 npm 包，但是当我运行 wepback 时，我不断收到此错误：

ERROR in ./src/Chatbot.tsx 184:20
Module parse failed: Unexpected token (184:20)
File was processed with these loaders:
 * ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
|         });
|     };
>     return !show ? (<button className={"".concat(css.chatbotToggler)} onClick={handleOpen}>      
|       <span className={"".concat(!showIcon ? css.none : css.notificationIcon)}>
|         <span className={"".concat(css.exclamation)}>!</span>
 @ ./src/index.ts 1:0-26 1:0-26

我也尝试将 css 加载器添加到我的 wepback.config.js 中：

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./src/index.ts",
  output: {
    path: path.resolve("build"),
    filename: "index.js",
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".css"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react"],
          },
        },
      },
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: ["ts-loader"],
      },
      {
        test: /\\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true,
            },
          },
        ],
      },
    ],
  },
  externals: {
    react: "react",
  },
};

我能想到的唯一问题是我使用三元来返回两个不同的状态，也许这令人困惑？除此之外，我认为问题可能是我使用的 css 模块和加载程序不匹配？

Answer 1

CSS 规则的 RegExp 错误：

而不是

test: /\\.css$/,

，您应该使用

 test: /\.css$/,

（点前有单斜线）