vue-cli3构建的项目中vue组件中引入stylus文件时报错解决办法

报错表现

 

 解决办法：

引入文件时路径前增加~

例子：

@import '~common/stylus/mixin.styl';

vue.config.js配置文件中alias的配置

chainWebpack: config => {
        config.resolve.alias
            .set('vue$', 'vue/dist/vue.esm.js')
            .set('@',resolve('src'))
            .set('@assets',resolve('src/assets'))
            .set('components', resolve('src/components'))
            .set('common',resolve('src/common'))
            .set('base',resolve('src/base'))
            .set('api',resolve('src/api')),
        config.resolve.symlinks(true)
    }

解释：为何需要增加·~·

~common代表相对于common目录，在webpack中配置了alias来简写common所指向的目录

参考文章：

https://github.com/shama/stylus-loader