Question

我遇到了Webpack的问题，并对来自https://github.com/felixrieseberg/React-Dropzone-Component

的dropzone插件做出反应

我使用webpack with 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'
      }
   ]
},

所以，问题只出在模块部分。我错过了。

还必须添加以下内容：

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

Webpack落在@ -webkit-keyframes传递中

1 个答案: