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

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)

- bw872

Answer 1

你需要另一个加载器来使css/style加载器工作。

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

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

祝你好运！

编辑：

我认为您也想看看这个SO问题。在同构React组件中导入CSS文件

- Shouichi

---

Webpack同构工具已不再维护，应迁移到https://github.com/catamphetamine/webpack-isomorphic-tools。 - digz6666

Answer 2

OP提到的项目正在使用这个： https://github.com/kriasoft/isomorphic-style-loader 所以，是另一个加载器和插入和使用样式的接口。

- Ian Walter

---

是的，它确实使用了那个，但为什么namenamesoseji会出现这个错误？“isomorphic-style-loader”应该能够在服务器端和客户端上都工作。看起来他的代码还没有被转译，但他如何在服务器端获得它被转译的呢？ - SudoPlz

Answer 3

可能你在你的webpack配置中没有使用sass loader。

尝试安装这个loader： Sass loader

webpack配置示例：

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

我还可以建议您使用postcss来应用autoprefixer！

- Luca Colonnello