Webpack 落在@-webkit-keyframes 通过

Question

我对来自 https://github.com/felixrieseberg/React-Dropzone-Component

的 Webpack 和 React dropzone 插件有疑问

我将 webpack 与 gulp

一起使用

我的 Webpack 配置：

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
        })
    ]
}))

css 文件的第一行：

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

我认为这是因为在 css 中我有 @-webkit-keyframes。但是我应该怎么办呢？对于这种情况，我找不到任何有用的加载器。

Answer 1

我找到了解决方案：

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

所以，问题出在 module 部分。我错过了。

还必须添加如下：

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

Webpack 落在@-webkit-keyframes 通过

Webpack falling at @-webkit-keyframes passing-through

css

dropzone.js

webpack