How to @import absolute path directly?

webpack

    resolve: {
        alias: {
            $variables: path.resolve('./styles/variables.styl')
        }
    }

xx.styl

@import  '$variables '

//error

How to @import absolute path directly?

[Panya]

You should define a variable using define in stylus-loader options:

stylus: {
  define: {
    $variables: path.resolve('./styles/variables.styl')
  }
}

And then inside a stylus file:

@import $variables

You can also use import option to auto-import these variables:

stylus: {
  import: [
    path.resolve('./styles/variables.styl')
  ]
}

[aseem2625]

In case someone is looking for rollup. globals key is used to define in the plugin rollup-plugin-stylus-compiler

stylus({
   compiler: {
     globals: { $vars: path.resolve('src/styles/_vars.styl') }
   }
}),