failed to locate @import file

chiboreache commented 5 years ago

Hi! I have an issue here

"vue": "^2.6.10"
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",

module.exports = {
  module: {
    loaders:
      [
        {
          test: /\.pug$/,
          loader: 'pug-plain-loader'
        },
        {
          test: /\.styl(us)?$/,
          use:
            [
              'vue-style-loader',
              'css-loader',
              'stylus-loader'
            ]
        }
      ]
  }
}

<style lang="stylus" scoped>
@import "~styles/_vars.styl"


↪ git:(master) ✗ npm run serve

> myproject@0.0.4 serve ...myProject
> vue-cli-service serve

 INFO  Starting development server...
 98% after emitting CopyPlugin                                                    

 ERROR  Failed to compile with 1 errors                                                              4:16:06 PM

 error  in ./src/components/myproject.vue?vue&type=style&index=0&id=3ac6da42&lang=stylus&scoped=true&

Module build failed (from ./node_modules/stylus-loader/index.js):
Error: ...myProject/src/components/myproject.vue:770:9
   766|                         }
   767|                 }
   768| </script>
   769| <style lang="stylus" scoped>
   770| @import "~styles/_vars.styl"----------------^
   771|    772| img
   773|         width 300px
failed to locate @import file ~styles/_vars.styl
    at CachedPathEvaluator.visitImport (...myProject/node_modules/stylus-loader/lib/evaluator.js:157:21)
    at CachedPathEvaluator.Visitor.visit (...myProject/node_modules/stylus/lib/visitor/index.js:28:40)
    at CachedPathEvaluator.Evaluator.visit (...myProject/node_modules/stylus/lib/visi
tor/evaluator.js:160:18)
    at CachedPathEvaluator.Evaluator.visitRoot (...myProject/node_modules/stylus/lib/
visitor/evaluator.js:707:27)
    at CachedPathEvaluator.Visitor.visit (...myProject/node_modules/stylus/lib/visito
r/index.js:28:40)
    at CachedPathEvaluator.Evaluator.visit (...myProject/node_modules/stylus/lib/visi
tor/evaluator.js:160:18)
    at CachedPathEvaluator.Evaluator.evaluate (...myProject/node_modules/stylus/lib/visitor/evaluator.js:247:15)
    at Renderer.render (...myProject/node_modules/stylus/lib/renderer.js:86:26)
    at ...myProject/node_modules/stylus-loader/index.js:167:12
    at tryCatchReject (...myProject/node_modules/when/lib/makePromise.js:840:30)
    at runContinuation1 (...myProject/node_modules/when/lib/makePromise.js:799:4)
    at Fulfilled.when (...myProject/node_modules/when/lib/makePromise.js:590:4)
    at Pending.run (...myProject/node_modules/when/lib/makePromise.js:481:13)
    at Scheduler._drain (...myProject/node_modules/when/lib/Scheduler.js:62:19)
    at Scheduler.drain (...myProject/node_modules/when/lib/Scheduler.js:27:9)
    at processTicksAndRejections (internal/process/task_queues.js:79:9)

 @ ./node_modules/vue-style-loader??ref--11-oneOf-1-0!./node_modules/css-loader??ref--11-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--11-oneOf-1-2!./node_modules/stylus-loader??ref--11-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/myproject.vue?vue&type=style&index=0&id=3ac6da42&lang=stylus&scoped=true& 4:14-459 14:3-18:5 15:22-467
 @ ./src/components/myproject.vue?vue&type=style&index=0&id=3ac6da42&lang=stylus&scoped=true&
 @ ./src/components/myproject.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.88.190:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

dasDaniel commented 5 years ago

I'm seeing the problem too. Looks like the alias links are not being referenced correctly.

using @import '@/css/main'; has same error as using @import "~styles/main"

replacing with relative path works though @import '../css/main'; or @import "../../node_modules/styles/main"

alexander-akait commented 3 years ago

Fixed in master, release will be soon, after release you need update stylus-loader, maybe you need to open an issue in vue-cli

yaiks commented 3 years ago

Hello everyone! I'm getting this issue too, using webpack: 4.44.1 and stylus-loader: 4.1.1.

1| @require '~styles/placeholders/base-block';
---------------^
2| @require '~styles/placeholders/details';
3| @require '~styles/placeholders/arrow-link';
4| 

failed to locate @require file ~styles/placeholders/base-block.styl

Here is my webpack config:

{
  test: /\.styl$/,
  use: [
    {
      loader: 'stylus-loader',
      options: {
        stylusOptions: {
          use: [
            postStylus([
              'autoprefixer',
              'css-mqpacker',
              'rucksack-css',
              'lost',
            ]),
            require('rupture')()
          ],
          paths: [
            path.resolve(__dirname, '../', 'app/styles'),
            path.resolve(__dirname, '../', 'node_modules')
          ],
          include: [path.resolve(__dirname, '../', 'app/styles')],
          import: [
            'rupture',
          ],
        },
        webpackImporter: false,
      }
    }
  ]
}

As @dasDaniel mentioned, using a relative path like @require '../../styles/placeholders/base-block'; works perfectly.

I've also read in the docs, if we use ~ to prepend paths, it will search directly in the node_modules. So I've tried the following paths to my file:

@require '~/styles/placeholders/base-block' @require '~@/styles/placeholders/base-block' @require '@/styles/placeholders/base-block'

At this point I'm just guessing paths hahah. Anyone has a clue on why stylus-loader is failing to locate my .styl files? Or if is it a bug, how can we help fix it?

Thank you in advance

webpack-contrib / stylus-loader

failed to locate @import file #220