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

Question

这与 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 来解决这个问题？

Answer 1

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

在我使用的 package.json 文件中

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

暂时有效