.../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…

[timse]

can anyone here provide a reproducable example? :)

[iraklisg]

@timse not pretty sure if it is a css-loader or a vue-loader issue, but when running npm run dev using the laravel-mix@0.5.16 webpack wrapper with the pre-configured webpack.config.js that ships with. I get the following error when trying to import the element-ui component's css

error  in ./~/element-ui/lib/theme-default/index.css

Module parse failed: /home/igeorgas/webApps/apptree2/node_modules/element-ui/lib/theme-default/index.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

| @charset "UTF-8";.el-breadcrumb:after,.el-breadcrumb:before,.el-form-item:after, ... /*more output*/ ...

In my entry point is

/**
 * Import project's dependencies
 */
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-default/index.css"; // <--- this line causes the error
import locale from "element-ui/lib/locale/lang/en";

/**
 * Install required Vue plugins
 */
Vue.use(ElementUI, {locale});

// more code....

My package.json

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "dependencies": {
    "axios": "^0.15.2",
    "element-ui": "^1.0.7",
    "jquery": "2.2.3",
    "lodash": "^4.16.2",
    "vue": "^2.1.8",
    "vue-router": "^2.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-runtime": "^6.22.0",
    "css-loader": "^0.26.1",
    "file-loader": "^0.9.0",
    "laravel-mix": "^0.5.9",
    "node-sass": "^3.13.0",
    "scss-loader": "^0.0.1",
    "style-loader": "^0.13.1"
  }
}

[iraklisg]

@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

[pedroborges]

I'm new to Webpack and didn't get what the error cause was for hours… Later I found it was lacking the CSS loader and the snippet bellow fixed the issue for me:

// webpack.mix.js

const { mix } = require('laravel-mix');

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  }
})

mix.js('resources/assets/js/main.js', 'public/js')
   .sass('resources/assets/sass/main.scss', 'public/css');

In my case I didn't modify the Webpack config directly, instead I extended Laravel Mix configuration.

To use Mint UI I also had to install the babel-plugin-component package and add a .babelrc file:

 npm install babel-plugin-component --save-dev

// .babelrc

{
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

[jrood]

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

[jrgleason]

I am seeing something similar I have the following in a less file..

@import "~angular-material/angular-material.css";
@import "~golden-layout/src/css/goldenlayout-base.css";
@import "~golden-layout/src/css/goldenlayout-dark-theme.css";

And I get

.../global.less Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

My webpack config looks like this...

{
          test: /global\.less$/,
          loaders: ["style-loader","css-loader","less-loader"]
},

[timse]

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

it works

[jrood]

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

[timse]

not sure, but i guess the reason this appears to be a problem is, that its at the top of the file so it looks like it has something to do with @ like @charset or @font-face but the problem just is, that no one handles the css probably :)

hope that fixes it for you

[timse]

oh and try to update to the latest version of this extract-text-plugin

[michael-ciniawsky]

If your dependency grap isn't to complex, you could do that yes, the reason to load them and moved them to outpu is mainly bc of

File Tree (Grunt, Gulp)

|– css
|   |– all styles...
|– media
|    |– all assets...
|– js 
|   |– all scripts...
|
|– index.js
|– index.css
|– index.html
|– gulpfile.js

Dependency Graph (webpack)

|– components
|  |– component (1)
|  |  | -index.js
|  |  |  |- index.scss
|  |  |  |- icon.svg
|  |  |  |– img.png 
|  |  |  | -index.js
|  |  |  |– subcomponent (1.1)
|  |  |  |  |- index.scss
|  |  |  |  |- icon.svg
|  |  |  |  |– img.png  
|  |– component (2)     
|  |  | -index.js
|  |  |- index.scss
|  |  |- icon.svg
|  |  |– img.png 
|
|– entry.js
|– index.html
|– webpack.config.js

You will get this all the time, when storing them in one place :)

import foo from '../../../component'

className {
   background-image: url('../../../image.png')
}

Thats why url/file-loader etc are needed at some point to have the webpack resolver dealing with that deps graph 😛

⚠️ If you don't use a component based architecture atm and there are no plans to also rework this, there is less benefit in using webpack ⚠️

[gkatsanos]

@michael-ciniawsky you're killing me now as I spent 8h on this already :) It's a Drupal (php CMS) website, so definitely not component based architecture - and yes now all the problems make sense..
I was using Gulp with Browserify but I was encountering problems with proper import of ES6 modules and in general it wasn't at all straightforward..

[gkatsanos]

@evilebottnawi I didn't get how to completely ignore fonts and images ; essentially there's no "src" and "dist" for my images as I've already included them in the "dist" directory.. this codebase I'm working on doesn't have a clear separation between src and dist (although I could make it now..)
although, many images for example are referenced/included in the CMS database directly so webpack has no reference to them .. so this is problematic :(

[gkatsanos]

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const exclude = /node_modules/;

module.exports = {
  entry: {
    "js/dest/bundle": "./js/src/main",
    "main": "./sass/main.scss",
    "frontpage": "./sass/main.scss"
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        exclude: exclude,
        use: [
          "babel-loader",
          "eslint-loader"
        ]
      },
      { test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
      { test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/, loader: 'file-loader?limit=100000' },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader'],
        })
      },
      {
        test: /\.s[ac]ss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: "css-loader",
              options: {
                importLoaders:  1,
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true,
                includePaths: [
                  path.resolve(__dirname, './node_modules/bootstrap-sass/assets/stylesheets'),
                ]
              }
            },
          ],
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ // define where to save the file
      filename: "./css/[name].css",
      allChunks: true,
    }),
  ],
};

so what happens now is webpack is generating a bundle.js main.css frontpage.css (correctly) but also a main.js and a frontpage.js (side effect).. it also moves all images in my ./

[alexander-akait]

@gkatsanos I'm not too familiar with with drupal, for wordpress exist https://github.com/roots/sage theme (but it is only beta), maybe it will help to inspire and rework the structure.

[alexander-akait]

@gkatsanos also try to search in google github drupal webpack 😄 seems not very bad https://github.com/teamdeeson/deeson-webpack-config, also you can see https://github.com/TallerWebSolutions/drupal-react-boilerplate. I think in the beginning it is necessary to work out the structure of the theme for the components of the form, not necessarily in the form as above, this is just one of the known representations of the structure, but you have the right to make it whatever you want

[michael-ciniawsky]

Maybe if JS only, better take a look at Rollup first and just ES2015 modulize the JS as a starting point :), it's not necessary to utilize webpack here if the architecture doesn't match (best/easiest example for getting started would be a simple react app). Gulp and webpack are similar in terms of 'you can build your stuff from start to finish' but that's also where the similarity ends 😛 . The concepts are enterily different approaches File Directory (File Tree) vs. Dependency Graph (parse, walk && resolve the import x from 'path/to/x' / require('path/to/x') statements)

[michael-ciniawsky]

- { test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/, loader: 'file-loader?limit=100000' }

url-loader base64 encodes your asset(s) into the bundle, when file size < limit, otherwise it will fallback to file-loader under the hood. Use file-loader additionally if you have assets you don't want to be encoded at all :)

[michael-ciniawsky]

The CMS in use isn't important 🙃 It's about the front-end architecture. Serving a app.bundle.js + index.html works with any back-end :). Try out a react app with webpack and get familiar with the shift in the mental model first. Saves you a lot of pain... Again if PHP/Python/Java && CMS X, Y, Z in the back-end isn't really relevant

[gkatsanos]

I totally understand. I've built 1-2 SPA's with Vue / Webpack so I've used the Component Based Architecture. Although I must say there are often times you need a concept of "Page" rather than a "Component" so I'm not sure if everything can be a Component in that sense..

Anyway. now I'm left with my half-baked webpack config and don't know how to proceed and if I should just stash and go back to Gulp. There is no concept of components in Drupal, so I will have to output all JS and CSS in the same directory by webpack's philosophy right?

[michael-ciniawsky]

Your bundle is the/a 'page' + an initial 'index.html'. The rest is client-side routing 😛 and AJAX to get the data (state) from the back-end. You never leave the index.html at best, it 'just' updates based on events and state, a typical Single Page Application (SPA) without the Request/Response Circle

[michael-ciniawsky]

It highly depends on how in particular your current page looks like, that's something you need to figure out yourself 🙃 , I didn't meant to discourage you on anything, try it out 😛, but it can cause you more trouble in the end by 'blindly' trying to press that into something 'webpack-able'

[gkatsanos]

:) but my website isn't a JS-generated thing - JS is only for effects:carousels/dropdowns/lazy loads etc, so indeed following the dependency tree of .js files doesn't do much..
I just wanna concat the js files, compile the CSS, generate source maps and have a file watcher running..

[michael-ciniawsky]

See e.g Drupal more as an API in a SPA, it's likely to be the case that many of the CMS 'Management' (PHP- based on a classical Request/Response Circle pattern) funtionality is obsolete then :D

[michael-ciniawsky]

Browserify is just fine for that and if you want to use ES2015 Modules Syntax then better Browserify => Rollup (gulp-rollup)

page.js (with Rollup)

import $ from 'jquery'
import { carousel, effect1, ... } from './lib/animations'

...

[gkatsanos]

great. last question. if my images are supposed to live in components, and I have already separated them by folder / page ; why is webpack dumping them all in the same directory ignoring the original path?

[michael-ciniawsky]

It rewrites the paths in various (loaders, plugins) places and finally adds them to the destination set in config.output, you can config that in a bunch of ways aswell, but that's a topic on it's own and error prone 😛

[gkatsanos]

      { test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/, loader: 'file-loader?name=[path][name].[ext]?[hash]' },

works :) I'm stubborn :) at least if I make a bare-bones working prototype then I can think on what's the best way to go about this. THanks for all the tips!

[michael-ciniawsky]

It's gathering them so the speak, the same applies to some point for CSS in conjunction with ETWP, webpack gathers the CSS chunks and emits a file, not useful when there are not a bunch of relative components, most of the time you will always to something like

components/component/index.js

import style from './index.css'
import icon from './image.png'

import component from './subcomponents/component'

....

components/component/subcomponents/component/index.js

import style from './index.css'
import icon from './image.png'

import component from './subcomponents/component'

....

[michael-ciniawsky]

Which gets 'flattened' in the output then

[alexander-akait]

/cc @michael-ciniawsky i think we can close this issue, seems invalid configuration (majority) and invalid usage some loaders (less) and invalid less/scss syntax, it is very different problem.

If someone else will face the problem simply create a new issue, be good disable to commenting here 😄

[gkatsanos]

@evilebottnawi @michael-ciniawsky I have to say one thing that helped me which maybe should be stressed more in the documentation section : "if you're coming from gulp". The point is this :
_
It's really not very clear in some part of the Webpack documentation (unless I missed) that webpack doesn't copy/move shit around, it finds references of things (with requires/imports/bg images/css fonts) and then takes these things, compiles them accordingly (config) and only then moves them around*.
_
e.g. it took me a while to figure out Webpack was finding the images referenced as background images in my CSS and moving them, or that I could import an image in my JS entry file and webpack would handle that as well.. Ex-Gulp folks always try to think of "I tell you to move X item to Y location, done."
In that sense when you use webpack not only you have to migrate your build setup but also refactor your code to make it Component/Module based (which is fairly easy)

[alexander-akait]

@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 😭

[bytemofan]

I also meet this error,but it's for .png, here is:
webpack2 config:

{
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: 'imgs/[name].[ext]'
                            },
                            options: {

                            },
                        }, {
                            loader: 'image-webpack-loader',
                            options: {
                                gifsicle: {
                                    interlaced: false,
                                },
                                optipng: {
                                    optimizationLevel: 7,
                                },
                                pngquant: {
                                    quality: "65-90",
                                    speed: 4
                                },
                                mozjpeg: {
                                    progressive: true,
                                    quality: 65
                                },
                                svgo: {
                                    plugins: [
                                        {
                                            removeViewBox: false
                                        },
                                        {
                                            removeEmptyAttrs: false
                                        }
                                    ]
                                }
                            }
                        }
                    ],
                    include: path.join(rootPath, 'src/imgs/**/*'),
                    exclude: [/node_modules/, path.join('imgs/sprites')]
                }

.less file:

.product-card-inner{
  width: 100%;
  height: 100%;
  position: relative;
  background: url(../imgs/card-bg.png) no-repeat;
  background-size: auto;
  background-position: center;
}

and i got error like this:

 ERROR in ./src/imgs/card-bg.png
    Module parse failed: /Users/chw/fecode/installment-fe/src/imgs/card-bg.png Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./~/css-loader?{"modules":false,"minimize":false,"sourceMap":true,"camelCase":false}!./~/postcss-loader?{}!./~/less-loader/dist?{"sourceMap":true}!./src/less/product.less 6:425-455

someone can tell me why?

[imnot2]

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

[krishnadubagunta]

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.

[alexander-akait]

A lot of problems here happen due invalid configuration. Closing issue. Please create new issue with minimum reproducible test repo. Thanks!