Verwenden von react-toolbox mit reactGo

Question

Ich benutze reactGo als ein Boilerplate für eine Web-App, und ich möchte react-toolbox für die Benutzeroberfläche enthalten. Durch einige unfruchtbare Experimente habe ich zumindest einige Fortschritte bei der Aufnahme in das Projekt gemacht. Ich bekomme auf dem Entwicklungsserver Rendering hängen. Da reactGo isomorph/universal ist (die Semantik ist nicht mehr wichtig), versucht es während der Server-Kompilierung des Webpacks in die react-toolbox zu laden. Das Problem ist react-toolbox wird mit CSS-Modulen erstellt. Webpack 2 kann mit CSS-Modulen umgehen, aber ich bin irgendwo gefangen. Jede Eingabe wäre sehr hilfreich.

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

ich hinzufügen, haben die "Isomo rphic-style-loader ", um mit den Problemen, die ich mit Style-Loader hatte, zu helfen, und es scheint mir geholfen zu haben. Ich bin jedoch immer noch darauf angewiesen, dass der "css-loader/localhosts" es richtig macht.

umfassen Jedes Mal, wenn ich eine Komponente aus der Bibliothek reagieren-Toolbox ich mit einem Fehler nach dem Vorbild der am Ende:

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

ich auf diesen einen durch habe drängen für eine Weile jetzt und ich brauche eine Außenperspektive. Jede Eingabe wäre hilfreich. Haben Sie keine Angst mehr Hintergrundinformationen oder Code zu fragen, wenn Sie denken, dass es hilft.

Answer 1

Ich fand eine Lösung: zuerst, Sie brauchen nicht eine zusätzliche reactToolbox.js in Regeln, nur den Code von postcss.config in der css.js-Datei. Fügen Sie dann in der Rückgabefunktion von css.js den Pfad für node_modules im Include (PATHS.modules) hinzu. Ich habe eine extra Datei scss.js gemacht, aber es ist nicht zwingend erforderlich.

Installieren Sie die fehlenden Module (csspost-verschachtelt, ...) Und das ist es, es große Arbeit :)

Answer 2

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

Und PATHS.modules in CSS auf die Rückkehr hinzufügen. js return { test: /\.css$/, use: browser ? browserLoaders : serverLoaders, include: [PATHS.app, PATHS.modules] };