使用快速服务器时无法在 React 组件上导入（要求）css、less、sass 文件

Question

我正在将 less 或 css 文件导入到我的 React 组件中，它在我的以下示例项目中运行良好： https://github.com/digz6666/webpack-loader-test

但是当我使用 express server 实现 SSR 时，我无法再将 less 文件导入到我的 React 组件中。它仅适用于 index.js 条目文件。它抛出以下异常：

[1] Error: Module parse failed: Unexpected token (2:0)
[1] You may need an appropriate loader to handle this file type.
[1] | // @import '~antd/dist/antd.css';
[1] > .trigger {
[1] |   font-size: 18px;
[1] |   line-height: 64px;
[1]     at eval (webpack:///./src/client/layout/baseLayout.less?:1:7)

这是我使用 SSR 的示例项目： https://github.com/digz6666/webpack-loader-test/tree/ssr

请取消注释以下文件中的样式，npm install 和 npm start to test:

/src/client/layout/baseLayout.less

Answer 1

我明白了，我的应用程序是同构的，所以我需要同构加载器。以下是回答我的问题：How to import CSS file on Isomorphic React - Webpack

我应该使用 https://github.com/catamphetamine/universal-webpack as the https://github.com/catamphetamine/webpack-isomorphic-tools 不再维护了。

Answer 2

我使用 https://github.com/kriasoft/isomorphic-style-loader 因为它更容易配置。我还在这里添加了代码： https://github.com/digz6666/webpack-loader-test/tree/ssr-2

使用快速服务器时无法在 React 组件上导入（要求）css、less、sass 文件

Unable to import (require) css, less, sass file on react component when using express server

express

reactjs

webpack

server-side-rendering

less-loader