reactjs - 服务器端 webpack 无法从 node_modules 读取 css 文件
问题描述
我正在尝试使用react-responsive-carousel创建一个组件。
但是在尝试为服务器端构建代码时收到以下消息。对于客户端,MiniCssExtract 加载器能够读取这个 css 文件:
.carousel .control-arrow, .carousel.carousel-slider .control-arrow {
^
SyntaxError: Unexpected token .
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
我的 webpack.client.config 是
{
test: /\.css$/,
include: [/node_modules/],
use: [
{ loader: MiniCssExtract.loader },
{ loader: 'css-loader' }
]
}
而 webpack.server.config 是
{
test: /\.css$/,
use: [
{ loader: "css-loader/locals" }
]
}
组件代码是这样的:
import React from 'react';
import 'react-responsive-carousel/lib/styles/carousel.css';
import { Carousel } from 'react-responsive-carousel';
import style from './component.css';
class Test extends React.Component {
render() {
return (
<Carousel>
<div>
<img src="assets/1.jpeg" />
<p className={`${style.legend}`}>Legend 1</p>
</div>
<div>
<img src="assets/2.jpeg" />
<p className={`${style.legend}`}>Legend 2</p>
</div>
<Carousel>
);
}
}
export default Test;
请帮忙。
解决方案
推荐阅读
- javascript - 避免可悬停内容的单击事件触发父元素的单击事件
- agda - Cubical Agda:我如何证明两件事不相等
- css - 为什么浏览器有不同的颜色?
- python - 在 Mac virtualenv 上安装 psycopg2 的问题:找不到 pg_config 可执行文件
- reactjs - 如何根据 Id 从打字稿中的记录中删除条目
- html - 如何以角度反应形式同步我的模板和打字稿代码,具有表单组?找不到控制错误
- javascript - 动画 CSS 文本在小滑块中不起作用
- passport.js - passport.js 不能与 nestjs 一起使用(fastify)
- node.js - 试图发出删除请求
- docker - 无法解析主机:gogs-repo