如何在vue项目中使用styl

由于新开的项目，想使用下styl，但是出师不利，创建项目时候就各种bug各种报错，所以先记录下来

首先，我们需要在style里面加入这样一句

<style lang='stylus' rel="stylesheet/stylus">

如果不加的话是会报错的

然后在main.js中引入

import './style/stylus/index.styl'

当然，这样是不会出来的，我们还需要安装style-loader和stylus-loader

npm install stylus stylus-loader style-loader --save-dev

然后修改webpack配置项（webpack.base.conf.js）在extensions中添加styl

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

最后修改rules

 {
        test: /\.styl$/,
        loader: 'style-loader!css-loader!stylus-loader',
        include: []
      }

嗯 就这样就可以了

转载于:https://www.cnblogs.com/yang656/p/10186904.html