初始化構建React+Ts項目時出現:Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError

具體錯誤

ERROR in ./src/index.tsx
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError
(2:1) Unknown word
var content = require("!!./index.tsx");
if(typeof content === 'string') content = [[module.id, content, '']]

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  entry: path.join(__dirname, "../src/index.tsx"),
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["babel-loader"],
        include: path.join(__dirname, "src")
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: ["ts-loader", "babel-loader", "css-loader", "style-loader"]
      },
      {
        test: /\.(s*)css$/, // 正則匹配文件路徑
        exclude: /node_modules/,
        use: ["css-loader", "style-loader"]
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".jsx", ".css", ".scss"]
  },
  // ...
};

解決方法

在添加ts編譯模塊的時候僅留下'ts-loader',即

{
  test: /\.tsx?$/,
  exclude: /node_modules/,
  use: ["ts-loader"]
},

具體緣由

待補充