使用react-toolbox與reactGo

Question

我使用reactGo作爲Web應用程序的樣板，我想爲UI包含react-toolbox。通過一些不切實際的試驗，我至少在將其納入項目方面取得了一些進展。我越來越掛在開發服務器渲染上。既然reactGo是同構/通用的（不再關心語義），它會在Webpack的服務器編譯期間嘗試加載react-toolbox。問題是react-toolbox是使用CSS模塊構建的。 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 
 
    }; 
 
};

我已經加入「isomo rphic-style-loader「來幫助解決我使用s​​tyle-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)

我已經在這一個通過推有一段時間了，我需要一些外部視角。任何輸入都會有幫助。如果你認爲它會有幫助，不要害怕要求更多的背景信息或代碼。

Answer 1

我找到了一個解決方案： 首先，你不需要額外的reactToolbox.js規則，只需將postcss.config的代碼放入css.js文件即可。 然後在css.js的返回函數中爲include（PATHS.modules） 中的node_modules添加路徑。 我做了一個額外的文件scss.js，但它不是強制性的。

安裝缺少模塊（csspost嵌套，...） 就是這樣，它的工作大:)

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