2

我是 webpack、node.js 以及基本上是 web 开发的初学者。我正在使用Redux/React/Isomorphic 样板。我正在尝试将React-Toolbox用于所有演示组件，但无法构建/捆绑（npm run dev），因为它会引发错误 - “找不到资产”。请帮我解决这个问题。我在下面给出了所有错误/配置详细信息

运行时出错 - “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

调查.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..

网络包配置：

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-tools 配置：

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;
    }
  }
4

1 回答 1

0

好吧，这个问题似乎特别是您需要在您的组件（间接通过 React Toolbox）中尝试在服务器端（这是 webpack-isomporphic-tools 正在处理的）而不是客户端呈现的 css，其中它属于。

您可以参考这个问题以获得潜在的解决方案：Importing CSS files in Isomorphic React Components

正如您所提到的，您对 Web 开发还很陌生，我还建议这里的样板对于早期学习/实验来说是巨大的过度杀伤（即使对于有经验的开发人员来说，同构也可能很棘手）和一些更简单的东西，比如https ://github.com/gaearon/react-hot-boilerplate或者只是从头开始组装一些简单的组件可能是一个更舒适的学习起点。

于 2016-05-15T16:13:37.270 回答