Javascript Grunt browserify在需要react引导类型时失败

Javascript Grunt browserify在需要react引导类型时失败,javascript,css,reactjs,browserify,grunt-browserify,Javascript,Css,Reactjs,Browserify,Grunt Browserify,我试图在我的项目中包含,但是当我运行grunt browserify任务时,我得到一个ParseError:Unexpected token错误。全文如下: Running "browserify:dist" (browserify) task >> /path/to/project/node_modules/react-bootstrap-typeahead/css/Typeahead.css:1 >> .bootstrap-typeahead .dropdown-me

我试图在我的项目中包含,但是当我运行grunt browserify任务时,我得到一个
ParseError:Unexpected token
错误。全文如下:

Running "browserify:dist" (browserify) task
>> /path/to/project/node_modules/react-bootstrap-typeahead/css/Typeahead.css:1
>> .bootstrap-typeahead .dropdown-menu {
>> ^
>> ParseError: Unexpected token
Warning: Error running grunt-browserify. Use --force to continue.

Aborted due to warnings.
问题在于react引导程序typeahead源js中有一个
require('/some/file.css')

这是我的grunt browserify任务:

    browserify: {
        dist: {
            cwd: 'build',
            options: {
                transform : ['browserify-css'],
                alias: {
                    'index' : './dist/index.js',
                    'root' : './dist/containers/root.js',
                    'designs' : './dist/components/designs.js',
                    'addMutationForm' : './dist/components/addMutationForm.js',
                    'ProteinChecker': './dist/containers/ProteinChecker.js',
                    'configureStore': './dist/configureStore.js',
                    'actions' : './dist/actions.js',
                    'reducers' : './dist/reducers.js',
                    'utils': './dist/utils.js',
                },
                require: [
                    './node_modules/isomorphic-fetch',
                    './node_modules/jquery',
                    './node_modules/react',
                    './node_modules/react-dom',
                    './node_modules/bootstrap',
                    './node_modules/redux',
                    './node_modules/babel-polyfill',
                    './node_modules/redux-logger',
                    './node_modules/redux-thunk',
                    './node_modules/underscore',
                    './node_modules/redux-form',
                    './node_modules/react-bootstrap-typeahead'
                ]
            },
            src: ['./dist/*.js', './dist/*/*.js'],
            dest: './public/build/app.js'
        }
    }
在尝试解决问题时,我遇到了一些事情: 一个类似的SO(尚未回答)问题,但使用webpack,而不是grunt+browserify,因此我认为不适用: react bootstrap typeahead项目的github页面上有一个已解决的问题,但没有通过grunt解决使用问题: 这建议使用browserify css转换

我试图通过在选项字段中添加
transform:['browserify-css']
来让grunt使用此转换,但没有成功。我仍然收到完全相同的错误消息

我尝试在命令行上使用browserify和browserify css转换来捆绑这一个库,然后包含该捆绑包,但这会导致更多错误,我认为这与相对导入有关(我不认为这是一个好的解决方案,因为如果我正确理解browserify,它最终会包括两次反应,一次是针对我在命令行上创建的typeahead包,另一次是针对实际应用包,最后的js文件非常大!)

有没有办法解决这个问题


提前感谢!

所以解决方案是添加

"browserify": {
    "transform": ["browserify-css"]
}
到react bootstrap typeahead的packages.json。
它出现在browserify css文档中…(facepalm)

请注意,模块的v0.5.x(当前为v0.10.4)停止直接在JS文件中使用css,因此这应该不再是一个问题。