使用vue-cli搭建好vue项目后，如果直接引入styl文件，会报错，需要安装stylus、stylus-loader依赖以及别名配置。

具体的步骤如下：

第一步： 安装stylus、stylus-loader依赖

cnpm install stylus-loader css-loader style-loader --save-dev

 

第二步： 别名配置

打开build目录    build >webpack.base.conf.js

resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'src': resolve('src'), 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'common':resolve('src/common') } },

  注： 

    common :别名    'src/common' ：styl路径

 

第三步：在全局中引入

 

在main.js中引入  import 'common/stylus/index.styl'

第四步： 组件中引入

<style scoped lang="stylus"> @import "~common/stylus/variable.styl" #app color: $color-theme </style>