CODEWITHSUNDEEP
csswebpackdropzone.js
Xander
Xander

Reputation: 6934

Webpack falling at @-webkit-keyframes passing-through

I have an issue with Webpack and react dropzone plugin from https://github.com/felixrieseberg/React-Dropzone-Component

I use webpack with gulp

My Webpack config:

gulp.src('app/scripts/main.js')
.pipe($.webpack({
    loaders: [
        'jsx-loader',
        {
            test: /\.css$/,
            loader:'style-loader!css-loader!postcss-loader!'
        }
    ],
    resolve: {
        root: path.resolve('./app/scripts/'),
        extensions: ['', '.js', '.jsx']
    },
    externals: {
        'react': 'React'
    },
    plugins: [
        new BowerWebpackPlugin({
            modulesDirectories: ["bower_components"],
            manifestFiles: "bower.json",
            includes: /.*/,
            excludes: [],
            searchResolveModulesDirectories: true
        })
    ]
}))

First lines of css file:

@-webkit-keyframes passing-through {
0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    ...

Error:

    ERROR in ./~/dropzone/dist/min/dropzone.min.css
Module parse failed: /test/node_modules/dropzone/dist/min/dropzone.min.css Line 5: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
|  * Copyright (c) ...
|  */
| @-webkit-keyframes passing-through {
|     0% {
|         opacity: 0;
 @ dropzone (bower component) 1:0-38

I think it is happens because in css I have @-webkit-keyframes. But what I should do with it? I can't find any usefull loader for this case.

Upvotes: 1

Views: 1535

Answers (1)

Xander
Xander

Reputation: 6934

I found solution:

module: {
   loaders: [
      {
         test: /\.css$/,
         loader: 'style-loader!css-loader'
      }
   ]
},

So, problem was just in module section. I missed it.

Also had to be added follow:

require('es6-promise').polyfill();

Upvotes: 1

Related Questions