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