如何在Vue组件中为@import〜stylus设置Webpack？

Question

I try to import my variables.stylus in my vue component, but when i use @import "~@themes/variables.stylus" , webpack throw error: failed to locate @import file ~@themes/variables.stylus.styl

webpack config

alias: {
      'vue$': 'vue/dist/vue.esm.js',
       themes: path.resolve(__dirname, './src/themes'),
       '@': resolve('src'),
 }

 {
     test: /\.styl$/,
     loader: ['style-loader', 'css-loader', 'autoprefixer-loader?browsers=last 5 version', 'stylus-loader']
 }

Answer 1

I believe it should be like this:

@import '~@/themes/variables.stylus';

Webpack replaces the alias @ with the path you have in the configuration, in this case src . So the import becomes src/themes/variables.stylus .