reworkcss / rework-npm

Import CSS from npm modules using rework

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Is there a recommended solution for re-writing relative paths?

colllin opened this issue · comments

When I @import from an npm package whose stylesheet includes a relative link to a font, the font link is broken upon import.

I had a similar issue (described here in more detail) and found rework-npm to not be handling relative paths well. Playing around with what would fix it, if I change this line in getImport

contents = parse(contents, { source: path.relative(root, file) });

to call path.resolve instead, it works fine for me.

The problem I saw was that by the time the file was being read here (if you follow the node modules down it's in atomify -> atomify-css -> rework -> css -> source-map-resolve in the lib/source-map-resolve-node.js file)

mapData.map = parseMapToJSON(String(read(mapData.url)))

mapData.url is "../node_modules/bootstrap/dist/css/bootstrap.css.map" which would be right if it's read relative to the root directory that got passed into rework-npm. I verified the root directory that got passed in was my styles directory, where my css file lives. However, by the time the read happened, that root directory isn't used and instead was run using the cwd from the process which was my project root, so it's trying to find a node_modules directory as a peer to my project directory.

My directory structure for reference:

  • project
    • node_modules
      • bootstrap
        • dist
          • css
            • bootstrap.css
            • bootstrap.css.map
    • styles
      • main.css