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

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

在我将css文件导入其中一个组件之前，一切正常。我知道node不能处理这个导入，但是有人能解释一下github上的这个包是如何允许他们的组件有一个css导入行的吗

我想使我的项目类似于此。在渲染组件时，服务器是否会忽略该行

这就是我得到的错误

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)

---

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

但Webpack只用于客户端代码开发：它在代码中查找所有require（）调用，并用各种各样的魔法来替换它们，从而使这些工作正常进行。如果您尝试在Webpack之外运行相同的源代码（例如，在Node.js服务器上），您将得到大量带有意外标记的语法错误。这是因为在Node.js服务器上没有Webpack require（）魔法，它只是尝试要求（）所有“资产”（样式、图像、字体、OpenGL着色器等），就好像它们是正确的javascript编码模块一样，因此会出现错误消息

祝你好运

编辑：

---

我想你也希望看到这个问题

可能您没有在tour网页包配置中使用sass加载程序

尝试安装此加载程序：

网页包配置示例：

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }
    ]
  }
  sassLoader: {
    includePaths: [path.resolve(__dirname, "./some-folder")]
  }
};

---

我也可以建议您使用POSTSS来应用autoprefixer

OP提到的项目正在使用：

---

是的，另一个加载器+一个接口来插入和使用样式。

是的，它确实使用了这个，但是为什么NamesEji会出现这个错误<代码>同构样式加载程序应该能够在服务器端和客户端工作。他的代码似乎还没有被公开，但他怎么能在服务器端公开呢？网页包同构工具不再像应该移植到的那样被维护