익스프레션 스태틱 CSS가 제공되지 않음

나는 몇 시간 동안이 사실을 알아 내려고 노력했으며 머리는 폭발하려고합니다. 나는 그것이 바보 같은 작은 세부 사항이 아니길 바래요 ...익스프레션 스태틱 CSS가 제공되지 않음

나는 서버 측 렌더링 반응 응용 프로그램 설정을 가지고 있습니다. 모든 것이 잘되고 있습니다. 내가 가진 유일한 문제는 내가 CSS를로드 할 수없는 것입니다.

여기 (node_modules없이) 내 파일 트리입니다 : https://i.stack.imgur.com/xevUb.png '

내 server.js 파일

app.use('static', express.static(__dirname + '/public')); 
 
app.use('dist', express.static(__dirname + '/dist')); 
 

 
app.get('*', (req, res) => { 
 
     match({ 
 
      routes, 
 
      location: req.url 
 
     }, (error, redirectLocation, renderProps) => { 
 
      if (error) { 
 
      res.status(500).send(error.message) 
 
      } else if (redirectLocation) { 
 
      res.redirect(302, redirectLocation.pathname + redirectLocation.search) 
 
      } else if (renderProps) { 
 
      var html = renderToString(< RouterContext { ...renderProps 
 
       } 
 
       />); 
 
       res.status(200).send(template({ 
 
       body: html 
 
       })); 
 
      } 
 
      else { 
 
       res.status(400).send('Not found.') 
 
      } 
 
      }); 
 
     });

에 다음 코드를 가지고 그리고 이것은 내 템플릿입니다. js 파일 :

export default ({ body }) => { 
 
    return ` 
 
    <!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
     <title>test</title> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
     <link rel="stylesheet" href="/static/css/style.css" /> 
 
     </head> 
 

 
     <body> 
 
     <div id="root">${body}</div> 
 
     </body> 
 

 
     <script src="dist/client.js"></script> 
 
    </html> 
 
    `; 
 
};

로컬 서버를 사용할 때. html이 전달되고 부트 스트랩 스타일이 적용됩니다. 그러나 template.js 파일에 연결된 style.css 및 client.js에 대해 400 개의 잘못된 요청 오류가 발생합니다.

출처

2017-03-09 YT98

귀하의 server.js 파일을 편집

정말 누군가가이 일에 저를 도울 수 있기를 바랍니다

...

내가 개발자 콘솔에 표시되는 내용입니다 dist 폴더 안에있는 것으로 보입니다. 즉 __dirname은 ./ 대신 ./dist이됩니다. 당신의 코드가 쓰여진 것처럼 보입니다. 당신이해야 할 일은 다음과 같습니다 :

const path = require('path') const projectRoot = path.resolve(__dirname, '../') app.use('static', express.static(projectRoot + '/public')) app.use('dist', express.static(__dirname))

출처

2017-03-09 20:55:55 idbehold

그래, 그럴 것 같아. 이것을 변경하고 client.js 파일이 현재 제공되고 있습니다. 아직 CSS는 없지만 : ( – YT98

나는 dist 디렉토리에 style.css를 넣었고 이제는 작동합니다. 왜 공용 디렉토리가 올바르게 서비스되지 않았는지 이해할 수 없습니다. – YT98

당신은'console.log (path.resolve (__dirname, '../'))'당신의 server.js 안에? 당신의 프로젝트의 루트 디렉토리를 가리켜 야합니다. – idbehold

익스프레션 스태틱 CSS가 제공되지 않음

답변

관련 문제