vue项目中引入stylus文件

使用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>