css-loader: .../styles.css Unexpected character '@'

@timse, all I made some progress. I noticed that the webpack.config.js file that ships with laravel-mix@0.5.16 lacks the test for css files.

So I added the following lines and the error gone

{
    test: /\.css$/,
    loader: 'style-loader!css-loader'
},

Now the assets are bundled just fine

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' }

same issue trying to load ‘element-ui’ css

Same issue with @font-face 😕

@jrood if i remove this line: https://github.com/jrood/unexpected-char-bug-reproduced/blob/master/webpack.config.js#L19

it works

can anyone here provide a reproducable example? 😃

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

@timse reproduced here https://github.com/jrood/unexpected-char-bug-reproduced

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…

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

if anyone still need help with this,

rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /(\.css$)/, include: /node_modules/, loaders: ['style-loader', 'css-loader'] }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' } ] these are the rules.

and I had to install devDependencies like url-loader and file-loader

that worked.

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

same question

{
        test: /\.css$/,
        use: CSSExtractor.extract({
          use: [{
            loader: "css-loader"
          }, {
            loader: "postcss-loader"
          }]
        })
      }

@font-face {
    font-family: 'evc';
    src: url('../fonts/evc.eot') format('embedded-opentype');
    src: url('../fonts/evc.svg') format('svg');
    src: url('../fonts/evc.ttf') format('truetype');
    src: url('../fonts/evc.woff') format('woff');
}

@gkatsanos What about me then I went from .sh -> grunt -> gulp -> webpack. I will agree it is diffucult to start thinking require/import after move from source to dest, but it is related more webpack docs then loader, you can create issue about this and help clarify this, example add note migrate-from-grunt-gulp, try to describe the basic principles of the work is brief and understandable, perhaps I could help in this, but my native language is not English and it’s all difficult for me 😭

Assets need to be loaded via an appropiate loader 😆, you need url/file-loader and add a rule to module.rules for each file type (extension)

rules: [
  // css
  // sass
  {
     test: /\.(gif|png|jpg)$/,
     use: [ 'file-loader' ]
  },
  {
     test: /\.(eot|ttf|woff|woff2)$/
     use: [ 'url-loader' ]
  }
]

I recommend you use a few simple .css/.sass files and test if that works (that == CSS Setup) 😃, no url() (Assets) etc. from the start, since resolving the correct asset paths especially as a beginner will bug you many times I swear you that 😛. Use the progressive approach instead and add things step by step to get familiar with the ‘webpack way’

UPDATED: I wasn’t using file-loader as it wasn’t included in the angular2-seed webpack starter project I was using. Have now installed file-loader and using it for images and the issue is fixed. Thanks for the heads-up.

No it isn’t. Should it be? I’m not currently using a loader for images. Here is my webpack.config file, effectively what I got with the angular2-seed project with slight amendment to reflect renaming of latest version of angular2-router-loader.

module: {
    loaders: [
      // .ts files for TypeScript
      {
        test: /\.ts$/,
        loaders: [
          'awesome-typescript-loader',
          'angular2-template-loader',
          'angular-router-loader'
        ]
      },
      { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
      { test: /\.html$/, loader: 'raw-loader' }
    ]
  }

Oh my, it was that slash in the path wasn’t it. Thanks @timse