1
我使用reactGo作为Web应用程序的样板，我想为UI包含react-toolbox。通过一些不切实际的试验，我至少在将其纳入项目方面取得了一些进展。我越来越挂在开发服务器渲染上。既然reactGo是同构/通用的（不再关心语义），它会在Webpack的服务器编译期间尝试加载react-toolbox。问题是react-toolbox是使用CSS模块构建的。 Webpack 2可以处理CSS模块，但我陷入了某个地方。任何输入都会非常有帮助。使用react-toolbox与reactGo
的WebPack /规则/ index.js：
const image = require('./image');
const javascript = require('./javascript');
const css = require('./css');
const reactToolbox = require('./reactToolbox');
module.exports = ({ production = false, browser = false } = {}) => (
[
javascript({ production, browser }),
css({ production, browser }),
image(),
reactToolbox()
]
);的WebPack /规则/ reactToolbox.js
const PATHS = require('../paths');
module.exports = ({ production = false, browser = false } = {}) => {
const browserSettings = [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
sourceMap: true,
importLoaders: 1,
localIdentName: "[name]--[local]--[hash:base64:8]"
}
},
"postcss-loader" // has separate config, see postcss.config.js nearby
];
const serverSettings = [
'isomorphic-style-loader',
{
loader: 'css-loader/locals',
options: {
modules: true,
localIdentName: "[name]--[local]--[hash:base64:8]"
}
},
"postcss-loader"
];
return {
test: /\.css$/,
include: [PATHS.modules + '/react-toolbox/'],
use: browser ? browserSettings : serverSettings
};
};我已经加入“isomo rphic-style-loader“来帮助解决我使用style-loader时遇到的问题，它似乎有所帮助。然而，我仍然坚持让“css-loader/locals”正确地完成它的工作。
任我包括从反应-工具箱库我结束了与沿行的误差的成分：
/Project/node_modules/react-toolbox/lib/ripple/theme.css:1
(function (exports, require, module, __filename, __dirname) { :root {
^
SyntaxError: Unexpected token :
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Project/node_modules/react-toolbox/lib/ripple/index.js:13:14)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Project/node_modules/react-toolbox/lib/button/index.js:20:15)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Project/node_modules/react-toolbox/lib/app_bar/index.js:14:15)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)我已经在这一个通过推有一段时间了，我需要一些外部视角。任何输入都会有帮助。如果你认为它会有帮助，不要害怕要求更多的背景信息或代码。
你可以发表你如何做的代码示例吗？ – Cleanshooter