Webpack loader complain, expected ":", got "."

[Kuchiriel]

I am trying to import to replace font-awesome scss

@import '~font-awesome-stylus'

ERROR in .//css-loader?sourceMap!.//vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-fe272a96","scoped":false,"hasInlineConfig":false}!.//stylus-loader!./client/app/scss/App.styl
Module build failed: ParseError: expected ":", got "."
at Parser.error (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:259:11)
at Parser.expect (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:287:12)
at Parser.object (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:2106:12)
at Parser.primary (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:2165:21)
at Parser.member (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:2070:21)
at Parser.subscript (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:2048:21)
at Parser.unary (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:2039:17)
at Parser.defined (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:2011:21)
at Parser.multiplicative (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1985:21)
at Parser.additive (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1970:21)
at Parser.range (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1954:21)
at Parser.relational (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1933:21)
at Parser.in (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1917:21)
at Parser.equality (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1902:23)
at Parser.typecheck (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1886:21)
at Parser.logical (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1873:21)
@ .//vue-style-loader!.//css-loader?sourceMap!.//vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-fe272a96","scoped":false,"hasInlineConfig":false}!./~/stylus-loader!./client/app/scss/App.styl 4:14-280 13:3-17:5 14:22-288
@ ./client/app/App.vue
@ ./client/app.js
@ ./client/index.js
@ multi ./build/dev-client ./client/index.js
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 26.5 kB 0
webpack: Failed to compile.

[raulghm]

please check the webpack recipe https://github.com/raulghm/Font-Awesome-Stylus/tree/master/recipes/webpack-2

[htmelvis]

Wondering if the above fix actually worked for anyone. I still get this error using:

$fa-font-path = './fonts';
@import '~font-awesome-stylus/index.styl';

It is trying to load the font-awesome-stylus.js file when imported into a stylus file so it dies trying to parse it. The recipe does not work for me.

 3| exports.path = __dirname;
        4| 
        5| function plugin() {
        6|   return function(style) {
        7|     style.include(__dirname);
    ------^
        8|   }
        9| }

[crs1138]

The recipe didn't work, perhaps because I'm using Webpack 3? Nevertheless, I have no way of telling what to do about that…

[Kuchiriel]

Try
$fa-font-path = "~font-awesome-stylus/fonts"
or
@import "~font-awesome-stylus/index"