`@import './common/style.stylus'` cause `Stylus resolver error: failed to locate`

[Bruce Wayne]

• Operating System: Macos
• Node Version: 12.13.1
• NPM Version: 6.14.11
• webpack Version: 5.23.0
• stylus-loader Version: 5.0.0

Code

<style lang="stylus" scoped>
  @import './common/style.stylus';
</style>

Expected Behavior

./common/style.stylus stylus should be injected

Actual Behavior

stylus-loader throws error: Stylus resolver error: failed to locate @import file ./common/style.stylus.styl

but if i change @import './common/style.stylus' to @import './common/style.styl' stylus-loader works fine

Code

// webpack.config.js
module.exports = {
module: {
    rules: [
      {
        test: /\.styl(us)?$/,
        use: [
          {
            loader: "vue-style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "stylus-loader",
          },
       ]
    }
  }
}

[Alexander Akait]

stylus is not official extension, the official extension is styl

[Alexander Akait]

Try it without stylus-loader:

main.styl

@import './common/style.stylus';

./common/style.stylus

a {
  color: red;
}

Output:

/home/name/projects/stylus-loader/node_modules/stylus/bin/stylus:685
              throw err;
              ^

Error: test.styl:1:9
   1| @import './common/style.stylus';
--------------^

failed to locate @import file ./common/style.stylus.styl

    at Evaluator.visitImport (/home/name/projects/stylus-loader/node_modules/stylus/lib/visitor/evaluator.js:915:21)
    at Evaluator.Visitor.visit (/home/name/projects/stylus-loader/node_modules/stylus/lib/visitor/index.js:28:40)
    at Evaluator.visit (/home/name/projects/stylus-loader/node_modules/stylus/lib/visitor/evaluator.js:160:18)
    at Evaluator.visitRoot (/home/name/projects/stylus-loader/node_modules/stylus/lib/visitor/evaluator.js:707:27)
    at Evaluator.Visitor.visit (/home/name/projects/stylus-loader/node_modules/stylus/lib/visitor/index.js:28:40)
    at Evaluator.visit (/home/name/projects/stylus-loader/node_modules/stylus/lib/visitor/evaluator.js:160:18)
    at Evaluator.evaluate (/home/name/projects/stylus-loader/node_modules/stylus/lib/visitor/evaluator.js:247:15)
    at Renderer.render (/home/name/projects/stylus-loader/node_modules/stylus/lib/renderer.js:86:26)
    at /home/name/projects/stylus-loader/node_modules/stylus/bin/stylus:679:15
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3) {
  lineno: 1,
  column: 9,
  filename: 'test.styl',
  stylusStack: '',
  input: "@import './common/style.stylus';"
}

Nothing to fix on our side, just rename stylus extension to styl

[Bruce Wayne]

stylus-loader@3.0.2 can resolve .stylus
Is there any breaking change documentation about this？

[Alexander Akait]

No, look like it was fixed when we fixed other bugs, if you want to update docs feel free to send a PR

[Bruce Wayne]

Got it. Thanks a lot！