How to @import absolute path directly?

[qingmingsang]

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')
  ]
}

[qingmingsang]

@Panya thx,that's very helpful

[shammellee]

@Panya can you point me to documentation for define in your example? Is this a webpack or stylus property?

[Panya]

It's not documented(?) property of the stylus-loader options object. It corresponds to define method of the stylus JS API (see http://stylus-lang.com/docs/js.html#definename-node). See https://github.com/shama/stylus-loader/blob/master/index.js#L77-L81

[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') }
   }
}),