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

具体原因

待补充

上一篇:502 Bad Gateway nginx 解决


下一篇:微信小程序开发笔记