初始化构建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"]
},

具体原因

待补充

转载于:https://www.cnblogs.com/soyxiaobi/p/11095875.html