CODEWITHSUNDEEP
node.jsstylus
user1820686
user1820686

Reputation: 2117

stylus can't resolve @import

I faced a problem with compiling stylus .styl file to css. If stylus file contains @import then I get "failed to locate @import file" error. For example, I have two simple stylus files:

root
  - specific
     - particularButton.styl
  - button.styl

// --- button.styl ---
.button
  // some styles

// --- specific/particularButton.styl ---
@import "../button.styl"
.particular-button
    // some styles

and I'm trying to convert them to css by using this code:

const stylus = require('stylus');
const fs = require('fs');

const filePath = // path to particularButton.styl

stylus(fs.readFileSync(filePath, 'utf8'))
    .set('paths', [
        // path to a folder that contain "button.styl"
    ])
    .render(function(err, css) {
        console.log(err);
        // <some action like> fs.writeFileSync(cssFileName, css);
    })

According to stylus API, I attempted to get it worked with .set('path' ... and without this setting. But without success.

Could someone help with that?

P.S. environment: OSX Mohave, node: 6.9.1, npm: 6.4.1, stylus: 0.54.5

Upd

The problem is in the relative path of @import "../button.styl". If I replace it with an absolute path to button.styl it becomes work. But it seems to be quite a bad solution...

Upvotes: 0

Views: 1672

Answers (1)

user1820686
user1820686

Reputation: 2117

Ok, I've just found out.

My problem is that I'm trying to add the wrong path in .set() method. Probably it was a bit unclearly documented, idk.

In case of relative import in particularButton.styl it's necessary to add a path of this file itself. Not the importing file. So it should be:

stylus(fs.readFileSync(filePath, 'utf8'))
    .set('paths', [
        // path to a folder that contain "particularButton.styl"
    ])

Upvotes: 1

Related Questions