7-2#去哪儿网app#header.vue

1.抽离共用样式

本页面里绿色是主要(共用)颜色，可以作为变量，在使用的时候调用。

在styles文件夹中创建varibles.style这个stylus文件，写下：

$bgColor = #00bcd4

再在header.vue中的样式里引入，注意样式引入样式要在import前面加上@，bg里写上变量名字$bgColor

@import '../../../assets/styles/varibles.styl'
.header
        display: flex
        line-height: .86rem
        background: $bgColor
        color: #ffffff

 可以直接~@变成从src目录中找(正常@就可以，但也是因为样式引入样式，所以前面加波浪)

@import '~@/assets/styles/varibles.styl'

可以在build里的 webpack.base.conf.js文件里找到@代表src的依据：

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

还可以在这个基础上自定义符号代表不同的文件(夹)

    'styles': resolve('src/assets/styles'),

则在header.vue的引入可以改成

    @import '~styles/varibles.styl'

 注意把main.js里相关路径也改成styles，保存后会报错是因为修改 webpack.base.conf.js文件后需要重启项目，ctrl+c => npm run start/dev ，正常http://localhost:8081

——————————————————————————————————————————————————————————————————————————————————

测试变量效果：

$bgColor = red

页面变红：

 

2../与../和/的区别

./    当前目录
../   父级目录
/     根目录

 

 

总结：本节先引入iconfont，然后再使用stylus定义变量，又对webpack文件修改以便简化代码，最后更新gitee

退出项目 => git add .  => git commit -m 'add header'  => git push