4

我正在尝试使用 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)
4

3 回答 3

3

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

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

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

祝你好运！

编辑：

我想你也想看看这个 SO question。在同构 React 组件中导入 CSS 文件

于 2015-12-05T15:29:44.250 回答
2

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

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

于 2016-01-08T23:08:06.983 回答
-2

也许你没有在 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！

于 2015-12-05T18:39:49.450 回答