.../styles.css Unexpected character '@'

[CrazyUmka]

Hi all! I get something strange error, maybe i did wrote wrong config file.
But if the file is styles.css present @charset "UTF-8", the parser generates an error.

Example index.js

require('./styles.css')

Example style.css

@charset "UTF-8"
body {
 ...
}

[benbarber]

I am getting the same issue as well. Build runs fine with no "@charset" present.

[tleunen]

Same issue with @font-face :/

[Vetnametz]

same issue with @import "~quill/dist/quill.snow.css";

[stinoga]

Anyone figure out the issue here? I'm seeing the same thing with @import.

[iceleaf97]

I got the same issue with @font-face
Add some code in webpack.config.js file and it does work.
{ test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

[morious]

@iceleaf97 couldn't get it to work with your suggestion.
Using Webpack 2.

[jrood]

Same issue here with @charset. It seems I only have this issue in Webpack 2, not Webpack 1.

[jonlambert]

Same issue here. Extra '@' character comes from a third-party lib so I'm thoroughly stuck with this bug.

[iraklisg]

same issue trying to load 'element-ui' css

[timse]

can someone create a repository where the bug is reproduceable?

just tried it myself and cant reproduce.

[vladsh91]

same issue with @Keyframes

[pedroborges]

Same issue with mint-ui and Laravel Mix:

ERROR in ./~/mint-ui/lib/cell/style.css
Module parse failed: /Users/name/Code/project/node_modules/mint-ui/lib/cell/style.css Unexpected token (10:0)
You may need an appropriate loader to handle this file type.
| /* Radio Component */
| /* z-index */
| .mint-cell {

ERROR in ./~/mint-ui/lib/font/style.css
Module parse failed: /Users/name/Code/project/node_modules/mint-ui/lib/font/style.css Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
|
| @font-face {font-family: "mintui";
|   src: url(data:application/x-font-ttf;base64,AAEAAAAPAIAAAwB…