Reactjs 在服务器呈现的react视图中导入样式表-TypeError:style.\u getCss不是一个函数
我正在NodeJS上构建一个同构的react redux应用程序。我正在从服务器呈现我的主页。但是,我的样式不会反映在渲染视图中。我想导入样式表,看看我在客户端是怎么做的。我也尝试过,但他们都没有真正让我达到我想要的目标 下面是关于这个项目的更多细节 B.法律改革委员会Reactjs 在服务器呈现的react视图中导入样式表-TypeError:style.\u getCss不是一个函数,reactjs,sass,redux,isomorphic-style-loader,Reactjs,Sass,Redux,Isomorphic Style Loader,我正在NodeJS上构建一个同构的react redux应用程序。我正在从服务器呈现我的主页。但是,我的样式不会反映在渲染视图中。我想导入样式表,看看我在客户端是怎么做的。我也尝试过,但他们都没有真正让我达到我想要的目标 下面是关于这个项目的更多细节 B.法律改革委员会 { "presets": [ "es2015", "react", "stage-0"], "plugins": ["transform-decorators-legacy", ["transform-assets", {
{
"presets": [ "es2015", "react", "stage-0"],
"plugins": ["transform-decorators-legacy", ["transform-assets", {
"extensions": ["scss"],
"name": "[name].[ext]?[sha512:hash:base64:7]",
}]]
}
webpack.config.js
const path = require('path');
module.exports = [
{
name: 'client',
target: 'web',
entry: './routes/client.jsx',
output: {
path: path.join(__dirname, 'assets'),
filename: 'client.js',
publicPath: '/assets/',
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules\/)/,
use: [{ loader: 'babel-loader'}]
},
{
test: /\.scss$/,
use: [
{ loader: 'isomorphic-style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]',
sourceMap: true
}
},
{ loader: 'sass-loader'}
]
}
],
},
}];
server.js
import express from 'express'
import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import MainStore from './views/store/MainStore'
import { StaticRouter } from 'react-router-dom';
import Routes from './routes/routes';
import Template from './views/templates/template';
import { Helmet } from 'react-helmet';
import { renderToString } from 'react-dom/server'
import ReactDOMServer from 'react-dom/server';
import ContextProvider from './routes/contextProvider'
const webpackDevMiddleware = require('webpack-dev-middleware')
const config = require('./webpack/webpack.development.config.js')
const webpack = require('webpack')
const app = express()
const port = 3000
const compiler = webpack(config);
let preloadedState = { shipper: {view: "from_server"} }
app.use('/assets', express.static('./assets'))
app.use(webpackDevMiddleware(compiler, {
publicPath: "/assets/",
}));
app.use(handleRender);
function handleRender(req, res) {
// Create a new Redux store instance
const store = createStore(MainStore, preloadedState)
const css = new Set(); // CSS for all rendered React components
const context = { insertCss: (...styles) => styles.forEach(style =>
css.add(style._getCss())) }
const html = renderToString(
<Provider store={store}>
<StaticRouter context={context}>
<ContextProvider context={context}>
<Routes />
</ContextProvider>
</StaticRouter>
</Provider>
)
const finalState = store.getState()
const helmet = Helmet.renderStatic();
const preloadedState = store.getState()
res.send(renderFullPage(html, preloadedState));
}
function renderFullPage(html, finalState) {
return `
<!doctype html>
<html>
<head>
<title>Redux Universal Example</title>
<style type="text/css">${[...css].join('')}</style>
</head>
<body>
<div id="root">${html}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
</script>
<script src="./assets/client.js"></script>
</body>
</html>
`
}
app.listen(port)
我正在将其作为导入我的homePresenter中
import homePageStyle from './home.scss';
并在我的div中与
<div className="component">
在浏览器上,我可以看到div的类名为“component”;它只是它没有继承这些风格
对我在这里遗漏的东西有什么建议吗
TypeError:style.\u getCss不是服务器上的函数。js:52:84
很可能是服务器端渲染配置不正确。如果您没有使用webpack
编译服务器端包,当然不会加载适当的样式,因为isomorphic style loader
没有处理服务器端的文件。检查应用程序是如何启动的,并确保已为服务器包应用了
webpack
,配置如下:您还可以尝试使用前端+后端绑定的现成同构解决方案,包括css支持,如。您是否使用了从“同构样式加载程序/lib/withStyles”导入with styles的
方法代码>在您的react组件中?@Umesh感谢您的指导。我插入了,但我现在遇到了另一个问题。我在这里遵循了这个过程,并且根据同构样式加载器的文档,同构样式加载器在样式对象上提供了两个助手方法-。_insertCss()(将CSS注入DOM)和._getCss()(返回CSS字符串)。但是,我得到了错误“TypeError:style.\u getCss不是server.js:52:84上的函数”
<div className="component">
<div className={homePageStyle.component}>
TypeError: style._getCss is not a function at server.js:52:84