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>