提问人:callan george 提问时间:8/25/2023 更新时间:8/26/2023 访问量:16
Webpack 似乎无法加载 css
Webpack can't seem to load css
问:
我正在尝试为单个 .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 模块并且加载器不匹配?
答:
0赞
biodiscus
8/26/2023
#1
CSS 规则的 RegExp 是错误的:
而不是你应该使用(点前的单斜杠)test: /\\.css$/,
test: /\.css$/,
评论