草庐IT

javascript - 如何处理响应服务器端渲染的 css 导入

coder 2025-01-06 原文

这与 Importing CSS files in Isomorphic React Components 非常相似

但建议的解决方案提出了一个条件语句，用于检查导入是从服务器还是浏览器完成的。问题是我在组件本身中使用导入对象，如下所示

<a href="/auth/github" className={style.link}>Sign up with github </a>

但是 style 是未定义的，因为我没有在服务器上导入它。另一种方法建议使用 webpack-isomorphic-tools，它也要求我捆绑服务器端代码。这种方法还迫使您在我不喜欢的服务器端使用 webpack。

基本上这是我的组件

import React from 'react';
import SignUp from './SignUp'
import {Link} from 'react-router'
import {connect} from 'react-redux';
import Modal from 'react-modal'
import style from './app.css'

class App extends React.Component{

  componentDidMount(){
    console.log('mounted')
  }

  render(){
    return (
      <div>
        <p> Hello Kj</p>
          <a href="/auth/github" className={style.link}>Sign up with github </a>
          <a href="/logout" className={style.logout}> Logout </a>
          <Link to ='/project'>Project</Link>
          <button onClick={this.openModal}> Login </button>
        <h1> {this.props.username} </h1>
        <h2> {this.props.email} </h2>
        <div> {this.props.children} </div>
      </div>
    )
  }
}

从服务器端渲染会抛出错误

 [Error] SyntaxError: /home/avernus/Desktop/projects/node-sc-react/client/app.css: Unexpected token (1:0)
> 1 | .link{
    | ^
  2 |   text-decoration: none;
  3 |   border: 1px solid black;
  4 |   background-color: blue;
    at Parser.pp.raise (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/util.js:89:8)
    at Parser.pp.parseExprAtom (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:522:12)
    at Parser.parseExprAtom (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/plugins/jsx/index.js:18:22)
    at Parser.pp.parseExprSubscripts (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:277:19)
    at Parser.pp.parseMaybeUnary (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:257:19)
    at Parser.pp.parseExprOps (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:188:19)
    at Parser.pp.parseMaybeConditional (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:165:19)
    at Parser.pp.parseMaybeAssign (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:128:19)
    at Parser.parseMaybeAssign (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/plugins/flow.js:460:20)

我是否可以不使用 webpack 来解决这个问题？

最佳答案

我实际上想出了一个使用 https://github.com/michalkvasnicak/babel-plugin-css-modules-transform 的方法

在我使用的 package.json 文件中

"start": "nodemon server/server.js --exec babel-node --plugins css-modules-transform"

暂时有效

关于javascript - 如何处理响应服务器端渲染的 css 导入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38351366/

javascript何处nodenode-sc-reactreactreactjswebpackbabeljs

有关javascript - 如何处理响应服务器端渲染的 css 导入的更多相关文章

  1. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  2. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  3. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  4. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  5. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  6. ruby-on-rails - 启动 Rails 服务器时 ImageMagick 的警告 - 2

    最近，当我启动我的Rails服务器时，我收到了一长串警告。虽然它不影响我的应用程序，但我想知道如何解决这些警告。我的估计是imagemagick以某种方式被调用了两次？当我在警告前后检查我的git日志时。我想知道如何解决这个问题。-bcrypt-ruby(3.1.2)-better_errors(1.0.1)+bcrypt(3.1.7)+bcrypt-ruby(3.1.5)-bcrypt(>=3.1.3)+better_errors(1.1.0)bcrypt和imagemagick有关系吗？/Users/rbchris/.rbenv/versions/2.0.0-p247/lib/ru

  7. ruby-on-rails - Enumerator.new 如何处理已通过的 block ？ - 2

    我在理解Enumerator.new方法的工作原理时遇到了一些困难。假设文档中的示例:fib=Enumerator.newdo|y|a=b=1loopdoy[1,1,2,3,5,8,13,21,34,55]循环中断条件在哪里，它如何知道循环应该迭代多少次(因为它没有任何明确的中断条件并且看起来像无限循环)？ 最佳答案 Enumerator使用Fibers在内部。您的示例等效于:require'fiber'fiber=Fiber.newdoa=b=1loopdoFiber.yieldaa,b=b,a+bendend10.times.m

  8. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  9. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  10. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b

随机推荐