Css-loader: ERROR in css-loader

Created on 31 Aug 2016  路  4Comments  路  Source: webpack-contrib/css-loader

When trying to import fonts directly from google:

ERROR in ./~/css-loader!./~/sass-loader!./src/sass/app.scss Module build failed: CssSyntaxError: css-loader-parser: /css-loader!/Users/Helder/www/MIRI-AM/node_modules/sass-loader/index.js!/Users/Helder/www/MIRI-AM/src/sass/app.scss:30:1: Unexpected formathttps://fonts.googleapis.com/css?family=Baloo+Bhaina at Input.error (/Users/Helder/www/MIRI-AM/node_modules/postcss/lib/input.js:120:22) at AtRule.error (/Users/Helder/www/MIRI-AM/node_modules/postcss/lib/node.js:129:38) at /Users/Helder/www/MIRI-AM/node_modules/css-loader/lib/processCss.js:47:23 at /Users/Helder/www/MIRI-AM/node_modules/postcss/lib/container.js:324:28 at /Users/Helder/www/MIRI-AM/node_modules/postcss/lib/container.js:164:26 at Root.each (/Users/Helder/www/MIRI-AM/node_modules/postcss/lib/container.js:130:22) at Root.walk (/Users/Helder/www/MIRI-AM/node_modules/postcss/lib/container.js:163:21) at Root.walkAtRules (/Users/Helder/www/MIRI-AM/node_modules/postcss/lib/container.js:322:25) at /Users/Helder/www/MIRI-AM/node_modules/css-loader/lib/processCss.js:40:8 at LazyResult.run (/Users/Helder/www/MIRI-AM/node_modules/postcss/lib/lazy-result.js:286:20) @ ./src/sass/app.scss 4:14-120 13:2-17:4 14:20-126

my webpack config file:

`var path = require("path");
var webpack = require('webpack');

module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/dev-server',
'./app/index.js'
],
output: {
path: __dirname + '/build',
filename: "index_bundle.js"
},
module: {
loaders: [
{ test: /.js$/, exclude: /node_modules/, loaders: ["react-hot-loader", "babel-loader"] },
{ test: /.scss$/, loader: 'style!css!sass' },
{ test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};`

Most helpful comment

If it is not already try wrapping the import for google webfonts url in url()

All 4 comments

I have encountered the same issue

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=
data-v-1!./~/sass-loader!./~/vue-loader/lib/selector.js?type=
styles&index=0!./src/App.vue
Module build failed: CssSyntaxError: css-loader-parser: /Users/didichan/Documents/hw/App.vue:1:0: 
Unexpected formathttps://fonts.googleapis.com/css?family=Raleway:200,300

If it is not already try wrapping the import for google webfonts url in url()

Thanks @Designaroni, you saved me!

Yep wrapped within url() or try by disable css-loader import handling {loader: 'css-loader', options: { import: false } }

Was this page helpful?
0 / 5 - 0 ratings