使用Sass反应服务器端渲染

由于我已经搜索过以前但未找到任何相关/已解决的问题所以我问...

当前堆栈:React,express/node,Sass,Webpack,Sass.

在服务器将页面发送到浏览器之前,我有一个特定于页面样式的问题.

样式在浏览器中完美运行,我的意思是当页面通过浏览器路由器导航时,所有样式都有效.但是,我需要找到一种方法,在服务器将页面发送到浏览器之前将自定义Sass样式注入页面.

当前行为:我从浏览器访问任何页面,我得到正确样式的页面服务但是有一个小的延迟,以获得正确的样式,以显示在页面上.如果以慢动作查看,页面将显示没有样式(因为服务器发送的页面没有样式),然后浏览器接管正确的样式.

我已尝试使用webpack在单独的文件中生成所有样式,但在服务器将其发送到浏览器之前,我似乎无法将此文件链接到页面.

任何帮助/反馈将不胜感激？

server.js(路由处理程序)

app.get('*', (req, res) => {
  const store = createStore();

  const promises = matchRoutes(Routes, req.path).map(({ route }) => {
    return route.loadData ? route.loadData(store) : null;
});

Promise.all(promises)
.then(() => {
  const cOntext= {};
  const cOntent= renderer(req, store, context);

  if (context.notFound) res.status(404);

  res.send(content);
 });
});

const PORT = process.env.PORT || 3000;

renderer.js

import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter, matchPath } from 'react-router-dom';
import { Provider } from 'react-redux';
import { renderRoutes } from 'react-router-config';
import serialize from 'serialize-Javascript';
import Routes from '../client/Routes';

export default (req, store, context) => {

  // req.path is the url that the user is trying to access
  const cOntent= renderToString(
  
   
    

      { renderRoutes(Routes) }
    
   
 
);

return `
  
    
      
    
    
      
${content}
      
      
    
  
`;
};

webpack.config.js(我省略了配置的其余部分,因为它不相关)

const extractSass = new ExtractTextPlugin({
  filename: "styles.css",
  disable: process.env.NODE_ENV === "development"
});

module: {
rules: [{
    test: /\.scss$/,
    use: extractSass.extract({
        use: [{
            loader: "css-loader"
        }, {
            loader: "sass-loader"
        }],
        // use style-loader in development
        fallback: "style-loader"
    })
  }]
},
plugins: [ extractSass ],

这给了我一个styles.css文件/build夹.我怎么能把它链接到我的HTML.如果我尝试抛出一个标签,浏览器将无法识别该文件.