vue,stylus文件引用没效果

自学vue,看视频写一个新项目，引用了styl格式的css，仿照视频去写，不知道哪里出了问题，styl文件中的样式一直没效果，最后终于找出bug解决了问题

1.安装stylus，npm install stylus -D（注意：命令结尾 -D 即是 --save-dev 的简写形式）

2.安装安装loader，npm install stylus-loader css-loader style-loader -D

3.找到 webpack.base.conf.js 文件，并在其中的module下rules中添加配置：　

{

　　test: /\.css$/,

　　loader: 'style-loader!css-loader!stylus-loader',

　　include: []

}

注意：在组件内部的style标签中，加入 lang="stylus" ，<style lang="stylus"><style>

4.在webpack.base.conf.js 文件，找到module.exports下的resolve，将extensions添加styl，如下图：

接下来就可以使用了，使用方式分两种。一种是在.vue文件的style块中使用，一种是引用.styl文件的形式

注意：如果是伪类设置样式，如：after,:before等等样式中必须添加content属性，伪元素才会显示出来

来源：https://www.cnblogs.com/li122844/p/11242798.html