Question

我正在使用reactGo作为网络应用的样板，我想为用户界面添加react-toolbox。通过一些不成熟的实验，我至少在将其纳入项目方面取得了一些进展。我正忙着开发服务器渲染。由于reactGo是同构/通用的（不再关心语义），它试图在Webpack的服务器编译期间加载react-toolbox。问题是使用CSS模块构建react-toolbox。 Webpack 2可以处理CSS模块，但我会陷入某个地方。任何输入都会非常有用。

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

我添加了“isomorphic-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的return函数中添加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中的返回值 func session(_ session: WCSession, didReceiveApplicationContext applicationContext: [String : Any]) { let receivedGlobal = applicationContext["my_global"] as? TypeOfTheGlobal }

使用react-toolbox与reactGo

2 个答案: