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

Kuchiriel commented 7 years ago

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 commented 7 years ago

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

htmelvis commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

raulghm / Font-Awesome-Stylus

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