how to use sass

[kobezone]

can you offered demo how to use sass? when i use sass element-ui & font-awesome it can't work

[kaiye]

Here is my sample code:

1. defined prefix and path variables
2. import entry scss file

[class^="el-icon-fa"], [class*=" el-icon-fa"] {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome!important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
};

$fa-css-prefix: el-icon-fa;
$fa-font-path: "~@/../node_modules/font-awesome/fonts";

@import '~@/../node_modules/font-awesome/scss/font-awesome.scss';

[jpickwell]

Try the following:

// font-awesome: Concatenates with '/' between path and font name.
$fa-font-path: '~font-awesome/fonts';
$fa-css-prefix: el-icon-fa;

@import '~font-awesome/scss/font-awesome';

[class^='#{$fa-css-prefix}-'], [class*=' #{$fa-css-prefix}-'] {
  display: inline-block;
  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

My project is using Webpack. Can't remember if the ~ prefix is Webpack or Sass specific.

[jpickwell]

I actually found a simpler option that allows FontAwesome's size classes to work.

// font-awesome: Concatenates with '/' between path and font name.
$fa-font-path: '~font-awesome/fonts';
$fa-css-prefix: el-icon-fa;

@import '~font-awesome/scss/font-awesome';

[class^='#{$fa-css-prefix}-'], [class*=' #{$fa-css-prefix}-'] {
  font-family: FontAwesome !important; // override ElementUI's icon font
}

[Even-Lau]

There are 3 types of icon font in fontawesome-free: "^5.8.1": solid, regular, light. All I got is the solid. How could I use the regular or light one? @jpickwell

[jpickwell]

@Even-Lau,

FA 5 has 4 sets: solid, regular, light, and brands. Light is not free. Only a sub-set of solid and regular are free. Brands is completely free, all icons included.

When I made those comments, I was using FA 4. Now I'm using FA 5, and I use the SVG+JS version instead of web fonts (IE may not allow web fonts to load). I also no longer use ElementUI. However, FA has a Vue component, and all the icons can be used directly through JS without using SCSS. To use with ElementUI, you might have to dig through their code looking for icon slots that you can override.