TypeError: expected "undefined" to be a unit, but got ident:...

[pkantsedalov]

Hi guys.

Trying to use it with webpack. Importing this way:

@import '~font-awesome-stylus'

But webpack says:

ERROR in ../~/css-loader!../~/stylus-loader!./{projectPath}/styles/index.styl
    Module build failed: Error: {myPath}\node_modules\font-awesome-stylus\stylus\lis
t.styl:14:22
       10|     position relative
       11| 
       12| .{$fa-css-prefix}-li
       13|   position absolute
       14|   left -($fa-li-width)
    ----------------------------^
       15|   width $fa-li-width
       16|   top (2em / 14)
       17|   text-align center

    TypeError: expected "undefined" to be a unit, but got ident:$fa-li-width
        at ".$fa-css-prefix-li" ({myPath}\node_modules\font-awesome-stylus\stylus\li
st.styl:11:22)

Fixed with my own with the next steps: 1) font-awesome-stylus/stylus/list.styl line 14 was left -($fa-li-width) became left (-$fa-li-width) 2) font-awesome-stylus/stylus/list.styl line 20 was left -($fa-li-width) + (4em / 14) became left (-$fa-li-width) + (4em / 14)

But the CSS output is the next one:

.$fa-css-prefix {
  display: inline-block;
  font: normal normal normal $fa-font-size-base/$fa-line-height-base FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Please help. Thanx in advance.

[ldong]

Facing the same issue with Meteor

=> Your application has errors. Waiting for file change.
=> Modified -- restarting.
=> Errors prevented startup:

   While processing files with stylus (for target web.browser):
   client/stylesheets/font-awesome/list.styl: Stylus compiler error: client/stylesheets/font-awesome/list.styl:14:22
   10|     position relative
   11|
   12| .{$fa-css-prefix}-li
   13|   position absolute
   14|   left -($fa-li-width)
   ----------------------------^
   15|   width $fa-li-width
   16|   top (2em / 14)
   17|   text-align center

   TypeError: expected "undefined" to be a unit, but got ident:$fa-li-width
   at ".$fa-css-prefix-li" (client/stylesheets/font-awesome/list.styl:11:22)

=> Your application has errors. Waiting for file change.

[mike-tomko-codebaby]

@pkantsedalov @ldong The issue seems to be the file names actually. The compiler is trying to build each file individually instead of just building font-awesome.styl.

My fix was to just to prefix all stylus files, excluding font-awesome.styl, with an underscore (and of course update font-awesome.styl to point to the new filenames)

[chilblane]

Ran into this issue as well; it seems webpack has issues with the variables.styl inside the Font Awesome folder if you have an identically named variables.styl elsewhere in your project. The solution would be to use a unique name for font-awesome-stylus' variables.styl, but in the mean time, use a unique name for your other variable Stylus files.

[raulghm]

Please someone could test the last pre-release 4.7.1-alpha.1 ?

Recently I added a new structure and other improves to make more compatible this package, please let my know any things about this.

Also I include a recipe working with webpack 2 in this path https://github.com/raulghm/Font-Awesome-Stylus/tree/dev/recipes/webpack-2

[raulghm]

Fixed in last version, see recipes folder for webpack integration.