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()
]
};`
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 } }
Most helpful comment
If it is not already try wrapping the import for google webfonts url in
url()