Question

我尝试使用express，react和webpack创建一个同构反应应用程序。

在我的一个组件中导入css文件之前，一切正常。我理解节点无法处理此导入，但有人可以解释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 / style加载器工作。

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

但Webpack仅用于客户端代码开发：它在代码中找到所有require（）调用，并用各种魔法替换它们以使事情有效。如果您尝试在Webpack之外运行相同的源代码 - 例如，在Node.js服务器上 - 您将获得大量具有意外令牌的SyntaxErrors。那是因为在Node.js服务器上没有Webpack require（）魔术发生，它只是尝试require（）所有“资产”（样式，图像，字体，OpenGL着色器等），就好像它们是正确的javascript编码模块一样因此错误信息。

祝你好运！

编辑：

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

Answer 2

OP提到的项目正在使用此项目： https://github.com/kriasoft/isomorphic-style-loader

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

Answer 3

也许你没有在tour webpack配置中使用sass加载器。

尝试安装此加载程序： Sass loader

webpack配置示例：

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

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

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

3 个答案: