如何正确configuration同构Web应用程序中的React-Toolbox没有“找不到资产”错误

我是一个初学webpack,node.js和基本到web开发。 我正在使用Redux / React / Isomorphic样板 。 我正在尝试为所有的表示组件使用React-Toolbox ,但是却无法构build/ bundle(npm run dev),因为它会抛出一个错误 – “找不到资产”。 请帮我解决这个问题。 我已经给出了所有的错误/configuration细节

运行错误 – 'npm run dev'

[2] ==> ? API is running on port 3030 [2] ==> ? Send requests to http://localhost:3030 [1] [webpack-isomorphic-tools] [error] asset not found: ./node_modules/react-toolbox/lib/ripple/style.scss [1] [webpack-isomorphic-tools] [error] asset not found: ./node_modules/react-toolbox/lib/button/style.scss [0] ./src/containers/Survey/Survey.js [0] [0] C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\src\containers\Survey\Survey.js [0] 6:8 error "Button" is defined but never used no-unused-vars [0] [0] ? 1 problem (1 error, 0 warnings) [0] [0] ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local][hash:base64:5]!./~/autoprefixer-loader?browsers=last 2 version!./~/sass-loader?outputStyle=expanded&sourceMap!./~/react-toolbox/lib/button/s tyle.scss [0] Module build failed: [0] undefined [0] ^ [0] Import directives may not be used within control directives or mixins. [0] in C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\node_modules\react-toolbox\lib_base.scss (line 4, column 3) [0] Error: [0] undefined [0] ^ [0] Import directives may not be used within control directives or mixins. [0] in C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\node_modules\react-toolbox\lib_base.scss (line 4, column 3) [0] at options.error (C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\node_modules\node-sass\lib\index.js:271:32) [0] @ ./~/react-toolbox/lib/button/style.scss 4:14-272 13:2-17:4 14:20-278 [0] ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local][hash:base64:5]!./~/autoprefixer-loader?browsers=last 2 version!./~/sass-loader?outputStyle=expanded&sourceMap!./~/react-toolbox/lib/ripple/s tyle.scss [0] Module build failed: [0] undefined [0] ^ [0] Import directives may not be used within control directives or mixins. [0] in C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\node_modules\react-toolbox\lib_base.scss (line 4, column 3) [0] Error: [0] undefined [0] ^ [0] Import directives may not be used within control directives or mixins. [0] in C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\node_modules\react-toolbox\lib_base.scss (line 4, column 3) [0] at options.error (C:\Users\myusername\Documents\Dev Work\MYAPP-REDUX\node_modules\node-sass\lib\index.js:271:32) [0] @ ./~/react-toolbox/lib/ripple/style.scss 4:14-272 13:2-17:4 14:20-278 [0] [webpack-isomorphic-tools/plugin] [error] Module "./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local][hash:base64:5]!./~/autoprefixer-loader?browsers=last 2 version!./~/sass-loader?outputStyle =expanded&sourceMap!./~/react-toolbox/lib/ripple/style.scss" has no source. Maybe Webpack compilation of this module failed. Skipping this asset. [0] [webpack-isomorphic-tools/plugin] [error] Module "./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local][hash:base64:5]!./~/autoprefixer-loader?browsers=last 2 version!./~/sass-loader?outputStyle =expanded&sourceMap!./~/react-toolbox/lib/button/style.scss" has no source. Maybe Webpack compilation of this module failed. Skipping this asset. [0] webpack built 7d8176b687a8306c3338 in 18755ms 

Survey.js:

 import React, {Component, PropTypes} from 'react'; import {connect} from 'react-redux'; import Helmet from 'react-helmet'; import {initialize} from 'redux-form'; import {SurveyForm} from 'components'; import Button from 'react-toolbox/lib/button'; .... rest of the code omitted as the above import causes this.. 

Webpackconfiguration:

 chunkFilename: '[name]-[chunkhash].js', publicPath: 'http://' + host + ':' + port + '/dist/' }, module: { loaders: [ { test: /.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']}, { test: /.json$/, loader: 'json-loader' }, { test: /.less$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local][hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' }, { test: /.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local][hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap', //include: /node_modules/react-toolbox/ }, { test: /.woff(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }, { test: /.woff2(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }, { test: /.ttf(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, { test: /.eot(\?v=\d+.\d+.\d+)?$/, loader: "file" }, { test: /.svg(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }, { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' } ] }, progress: true, resolve: { modulesDirectories: [ 'src', 'node_modules', //path.join(dirname, '../node_modules') ], extensions: ['', '.json', '.js', '.jsx', '.scss', ] }, plugins: [ // hot reload new webpack.HotModuleReplacementPlugin(), new webpack.IgnorePlugin(/webpack-stats.json$/), new webpack.DefinePlugin({ __CLIENT: true, SERVER: false, DEVELOPMENT: true, DEVTOOLS: true // <-------- DISABLE redux-devtools HERE }), webpackIsomorphicToolsPlugin.development() ] }; 

webpack-isomorphic-toolsconfiguration:

 style_modules: { include: [/^\.\/node_modules\/*/], extensions: ['less','scss'], filter: function(module, regex, options, log) { if (options.development) { // in development mode there's webpack "style-loader", // so the module.name is not equal to module.name return WebpackIsomorphicToolsPlugin.style_loader_filter(module, regex, options, log); } else { // in production mode there's no webpack "style-loader", // so the module.name will be equal to the asset path return regex.test(module.name); } }, path: function(module, options, log) { if (options.development) { // in development mode there's webpack "style-loader", // so the module.name is not equal to module.name return WebpackIsomorphicToolsPlugin.style_loader_path_extractor(module, options, log); } else { // in production mode there's no webpack "style-loader", // so the module.name will be equal to the asset path return module.name; } }, parser: function(module, options, log) { if (options.development) { return WebpackIsomorphicToolsPlugin.css_modules_loader_parser(module, options, log); } else { // in production mode there's Extract Text Loader which extracts CSS text away return module.source; } } 

       

网上收集的解决方案 "如何正确configuration同构Web应用程序中的React-Toolbox没有“找不到资产”错误"

好的,这个问题似乎是你需要组件中的css(间接地通过React Toolbox)来尝试在服务器端(这是webpack-isomporphic-tools正在处理的)而不是客户端进行渲染的地方它属于。

您可以参考这个问题的潜在解决scheme: 导入同构反应组件中的CSS文件

正如你所提到的,你对web开发相当陌生,我也会build议这里的样板对于早期的学习/实验来说是巨大的矫枉过正(即使对于有经验的开发人员来说,同构也可能是棘手的),而且像https ://github.com/gaearon/react-hot-boilerplate或者只是从头开始组装一些简单的组件可能会是一个更加舒适的学习起点。