使用 react-toolbox 和 reactGo

Question

我正在使用 reactGo 作为 Web 应用程序的样板，我想在 UI 中包含 react-toolbox。通过一些徒劳的实验，我至少在将其纳入项目方面取得了一些进展。我正忙于开发服务器渲染。由于 reactGo 是同构/通用的（不再真正关心语义），它会在 Webpack 的服务器编译期间尝试加载到 react-toolbox 中。问题是 react-toolbox 是使用 CSS 模块构建的。 Webpack 2 可以处理 CSS 模块，但我在某个地方遇到了麻烦。任何意见都会非常有帮助。

webpack/rules/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/rules/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
  };
};

我添加了“isomorphic-style-loader”来帮助解决我在使用 style-loader 时遇到的问题，它似乎有所帮助。但是我仍然坚持让“css-loader/locals”正确地完成它的工作。

每当我从 react-toolbox 库中包含一个组件时，我都会遇到如下错误：

/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)

我已经在这方面推进了一段时间，我需要一些外部视角。任何输入都会有所帮助。如果您认为这会有所帮助，请不要害怕询问更多背景信息或代码。

Answer 1

我找到了解决方案： 首先，规则中不需要额外的 reactToolbox.js，只需将 postcss.config 的代码放在 css.js 文件中即可。 然后在 css.js 的返回函数中，在 include(PATHS.modules) 中添加 node_modules 的路径 . 我做了一个额外的文件 scss.js 但它不是强制性的。

安装缺少的模块(csspost-nested,...) 就是这样，效果很好:)

Answer 2

关注： https://github.com/react-toolbox/react-toolbox#usage-in-webpack-projects-not-create-react-app

并将 PATHS.modules 添加到 css.js 中的返回 return { test: /\.css$/, use: browser ? browserLoaders : serverLoaders, include: [PATHS.app, PATHS.modules] };