confusion about nested file hierarchy styles #59

ariesshrimp · 2016-09-11T08:18:04Z

So this plugin is awesome, but I've read a bunch of uses and this part still doesn't make sense in the existing documentation. The extract-text-plugin will only generate one css file. So if you have a nested directory structure in your generated output, you need to dynamically point the <link> tags to different locations. For example:

public/
    | index.html             <- This file needs <link href="styles.css"/>
    | styles.css             <- extract-text-plugin generates this file
    | about/
       | index.html          <- This file needs <link href="../styles.css"/>
    | posts/
       | some-post-title/
           | index.html      <- This file needs <link href="../../styles.css"/>

You can circumvent the problem during development using webpack-dev-server or browser-sync or something that fools around with the path while serving. But I don't see how you can deploy code this way.

For example: https://css-tricks.com/css-modules-part-3-react/ has a working example using dev-server.

http://jxnblk.com/writing/posts/static-site-generation-with-react-and-webpack/ just uses dangerouslySetInnerHtml to hardcode a <style> tag into his root component. That seems pretty suboptimal.

Is there a way using the webpackStats object in your base template to dynamically generate the needed <link> tags down the hierarchy? I haven't seen any use-cases that circumvent this yet, is it a possible feature, or just a tricky implementation detail?

Thanks!

The text was updated successfully, but these errors were encountered:

ariesshrimp · 2016-09-12T05:37:33Z

So right now my solution is to pass locals from the entry point to my template function and do a hacky check on the path:

// template.js
export default props => {
  const distanceToRoot = props.locals.path !== '/'
    ? props.locals.path.split('/').slice(1).map(level => '../').join('')
    : '/'
return <html lang="en">
    <head>
      <link href={ `${distanceToRoot}styles.css` } rel="stylesheet"/>
    </head>
    ...

Not sure if that's the best strategy, or if there's a better built-in way of handling this, but this might be helpful to others. It would be nice for this to be handled by default somehow.

vitalyq · 2016-09-12T12:45:54Z

@joefraley the simplest solution is to use absolute paths, namely <link rel="stylesheet" href="/style.css">, that is what react-router-tutorial suggests.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

confusion about nested file hierarchy styles #59

confusion about nested file hierarchy styles #59

ariesshrimp commented Sep 11, 2016 •

edited

Loading

ariesshrimp commented Sep 12, 2016 •

edited

Loading

vitalyq commented Sep 12, 2016

confusion about nested file hierarchy styles #59

confusion about nested file hierarchy styles #59

Comments

ariesshrimp commented Sep 11, 2016 • edited Loading

ariesshrimp commented Sep 12, 2016 • edited Loading

vitalyq commented Sep 12, 2016

ariesshrimp commented Sep 11, 2016 •

edited

Loading

ariesshrimp commented Sep 12, 2016 •

edited

Loading