Vue project homepage-iconfont usage and code optimization (7-2)

Use of iconfont and code optimization

1. Put the required icon into the shopping cart and enter the shopping cart.
   
2. Add to the project.
   
3. Download to local.
   
4. First open iconfont.css, check which files are needed, and put the required files in.
   
5. Because when I originally downloaded the quoted words were quoted from the current folder, now I have modified the folder address.
   
   If you don't like to use the icon in the form of hexadecimal, you can clear the following ones.
   
6. Because I need iconfont.css for each component, I put it in main.js.
   
7. We want to refer to the icon, how to refer to it?
   
   Where did the code come from?
   
8. Make some code changes.

<style lang="stylus" scoped>
  @import '../../../assets/styles/varibles.styl'
  .header
    display: flex
    line-height: .86rem
    background: $bgColor
    color: #fff
    .header-left
      width: .64rem
      float: left
      .back-icon
        text-align: center
        font-size: .4rem
    .header-input
      flex: 1
      height: .64rem
      line-height: .64rem
      margin-top: .12rem
      margin-left: .2rem
      padding-left: .2rem
      background: #fff
      border-radius: .1rem
      color: #ccc
    .header-right
      width: 1.24rem
      float: right
      text-align: center
      .arrow-icon
        margin-left: -.04rem
        font-size: .24rem

</style>

1. And because the color is normal, we can put it in a public file for easy maintenance in the future, we create a file with the suffix styl. And set the color name.
   

2. Just import the file. @import'…/…/…/assets/styles/varibles.styl'
   

3. And because it seems inconvenient to quote ours, then we modify the prefix of the quote and open the webpack.base.conf.js file. Modify and add one.
   

4. This time it is necessary to modify the introduction. Remember to add ~ when introducing between css.
   
   At the same time, the introduction of the main.js file must be modified.
   

to sum up

1. How to cite iconfont?
2. How to use styl to define variables?
3. How to make references more convenient.