reactjs - 如何在同构 React 上导入 CSS 文件 - Webpack

Question

我正在尝试使用express、react和webpack创建一个同构的react应用程序。

一切正常，直到我在我的组件之一中导入 css 文件。我知道 Node 无法处理此导入，但是有人可以解释 github 上的这个包如何允许其组件具有 css 导入行吗？

https://github.com/kriasoft/react-starter-kit

我想让我的项目与此类似。他们是否有一行让服务器在渲染组件时忽略该行？

这是我得到的错误

SyntaxError: /home/USER/Code/shared/general/ru/src/components/MainPage/MainPage.scss: Unexpected token (1:1)
> 1 | @import '../variables.scss';
    |  ^
  2 | 
  3 | .MainPage {
  4 |   background-color: $primary-color;
    at Parser.pp.raise (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.parseExprAtom (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:425:12)
    at Parser.parseExprAtom (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/plugins/jsx/index.js:412:22)
    at Parser.pp.parseExprSubscripts (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:236:19)
    at Parser.pp.parseMaybeUnary (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:217:19)

Answer 1

您还需要另一个加载器才能使 css/样式加载器正常工作。

https://www.npmjs.com/package/webpack-isomorphic-tools

But Webpack is made for client side code development only: it finds all require() calls inside your code and replaces them with various kinds of magic to make the things work. If you try to run the same source code outside of Webpack - for example, on a Node.js server - you'll get a ton of SyntaxErrors with Unexpected tokens. That's because on a Node.js server there's no Webpack require() magic happening and it simply tries to require() all the "assets" (styles, images, fonts, OpenGL shaders, etc) as if they were proper javascript-coded modules hence the error message.

祝你好运!

编辑:

我想你也想看到这个问题。 Importing CSS files in Isomorphic React Components