Expected behavior Expect to locate the .

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Fail to locate @import file "~@pkg/style.styl" in node_modules about component-compiler-utils HOT 4 OPEN

vuejs commented on May 3, 2024

Fail to locate @import file "~@pkg/style.styl" in node_modules

from component-compiler-utils.

Comments (4)

y-nk commented on May 3, 2024 10

@KarlBao @r4fx after few hours of debugging, i found a fix which works.

In your rollup config, add :

Import the stylus node evaluator with import { Evaluator } from 'stylus'
Pass it along the vue options with

vue({
  style: {
    preprocessOptions: {
      stylus: { Evaluator }
    }
  }
}),

Now, we can patch Evaluator to support alias resolution :

const visitImport = Evaluator.prototype.visitImport
Evaluator.prototype.visitImport = function(imported) {
  const path = imported.path.first

  if (path.string.startsWith('~'))
    path.string = path.string.replace('~', '').replace('@', '/whatever-absolute-path-we-want/src')

  return visitImport.call(this, imported)
}

This dirty solution works as a workaround and should definitely be addressed in other way. Although, it works cleanly enough not to relay on any dirty patch located in `node_modules`.

All in one place explanation :

import alias from 'rollup-plugin-alias'
import vue from 'rollup-plugin-vue'

import { Evaluator } from 'stylus'


const aliases = {
  '@' : `${__dirname}/src`
}


const visitImport = Evaluator.prototype.visitImport
Evaluator.prototype.visitImport = function(imported) {
  const path = imported.path.first

  if (path.string.startsWith('~')) {
    const alias = Object.keys(aliases).find(entry => path.string.startsWith(`~${entry}`))

    if (alias)
      path.string = path.string.substr(1).replace(alias, aliases[alias])
  }

  return visitImport.call(this, imported)
}

const plugins = [
  alias(aliases),
  vue({
    style: {
      preprocessOptions: {
        stylus: { Evaluator }
      }
    }
  }),
]