在reactGo中使用react-toolbox

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

​

我添加了“同构样式加载器”来帮助解决我在使用样式加载器时遇到的问题，它似乎起到了帮助作用。然而，我仍然坚持让"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] };中的return中