Default index.html uses bootstrap and sass out of box

[dimroc]

I feel like supporting bootstrap from the get go would be a huge win.

Or perhaps in the upcoming README, you discuss how to add bootstrap and sass.

[olebedev]

One of the benefits of this project to show how to use css-modules. Using of bootstrap is not assumed but is possible.

There are no any barriers for adding twitter bootstrap or saas. Only what you need just add bootstrap.css into react.html file. Or change stylus to sass in webpack.config.js file and add bootstrap sources.

I close it, feel free to open it if the issue isn't clear.

[dimroc]

What's the recommended way of adding sass to the following piece of code in webpack.config.js to support both sass and stylus?

var cssLoader = ExtractTextPlugin.extract(
  'style-loader',
  'css-loader?module&localIdentName=[name]__[local]___[hash:base64:5]' +
    '&disableStructuralMinification' +
  '!autoprefixer-loader!' +
  'stylus-loader?paths=src/app/client/css/&import=./ctx'
);

[dimroc]

After some more tinkering I have a few lingering errors. Here is my current webpack.config.js: https://gist.github.com/3f1d722c61a144aa7034

I often get this issue:

Thanks for all the work so far. I'm using this as a starter-kit so I'm hoping it will be easy to get up and running with sass and bootstrap.

---

UPDATE: I've made progress and have sass successfully loading. A review would go a long way though!

[dimroc]

Got it all together but it took a while. Granted, I wasn't terribly familiar with webpack loaders.

1. npm install sass-loader node-sass bootstrap-sass-loader bootstrap-sass url-loader --save-dev
2. webpack.config.js https://github.com/olebedev/go-starter-kit/blob/1e850a27135f90e85981c0bcc18d4df032aa1337/src/app/client/css/index.js#L10
3. For proper hot reloading, you need to require the top level scss file in css/index.js, as you've done here: https://github.com/olebedev/go-starter-kit/blob/master/src/app/client/css/index.js

Even after this, you have to @import the bootstrap sass files where needed. Hope this all helps the next guy!

[olebedev]

@dimroc thanks for the tips. They are quite interesting for the man who uses bootstrap and/or sass.

[olebedev]

So 'window undefined' error probably because some bootstrap internals require window object for initialization. It's not only this project's issue but all isomorphic apps' as well.

[dimroc]

Ah. I never thought of that. Thanks for the insight.

[iKonrad]

@dimroc Hi, I'm trying to do the same thing! I know the post is like a year old, but maybe you have your final implementation files handy?

I've installed the packages and copied over your webpack file and got rid of post-css references and I'm getting some weird issues in go:

`panic recover interface conversion: interface is errors.errorString, not string stack trace 5296 bytes goroutine 14 [running]: github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo.v1/middleware.Recover.func1.1.1(0xc4200b3280) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo.v1/middleware/recover.go:20 +0xbc panic(0x445f1e0, 0xc420013bc0) /usr/local/go/src/runtime/panic.go:458 +0x243 main.(React).Handle.func1(0xc4200b3280, 0xc4201c38b0) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/server/react.go:57 +0xce panic(0x4453440, 0xc4201c3920) /usr/local/go/src/runtime/panic.go:458 +0x243 main.Must(0x46c4640, 0xc4201c3920) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/server/utils.go:6 +0x5c main.newReactVM(0xc4200eb480, 0x16, 0x46c4740, 0xc4200b9680, 0xc42003b5f8) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/server/react.go:164 +0x15c main.(onDemandPool).get(0xc4200eb6a0, 0x4506828) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/server/react.go:215 +0x49 main.(React).Handle(0xc420017ce0, 0xc4200b3280, 0x0, 0x0) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/server/react.go:62 +0xec main.NewApp.func4.1(0xc4200b3280, 0x0, 0x0) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/server/app.go:125 +0x188 github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo%2ev1.wrapHandlerFuncMW.func1.1(0xc4200b3280, 0x0, 0x0) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo.v1/echo.go:675 +0x61 github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo%2ev1.wrapHandlerFuncMW.func1.1(0xc4200b3280, 0x4506548, 0xc4200b3280) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo.v1/echo.go:675 +0x61 github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo.v1/middleware.Recover.func1.1(0xc4200b3280, 0x0, 0x0) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo.v1/middleware/recover.go:25 +0x75 github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo.v1/middleware.Logger.func1.1(0xc4200b3280, 0xc4201c3890, 0x3) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo.v1/middleware/logger.go:33 +0x10a github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo%2ev1.(Echo).ServeHTTP(0xc4200b9680, 0x46c9640, 0xc42015b5f0, 0xc4200ef3b0) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo.v1/echo.go:557 +0x1ca net/http.serverHandler.ServeHTTP(0xc4200b3000, 0x46c9640, 0xc42015b5f0, 0xc4200ef3b0) /usr/local/go/src/net/http/server.go:2202 +0x7d net/http.(conn).serve(0xc420290300, 0x46c9e00, 0xc420013b40) /usr/local/go/src/net/http/server.go:1579 +0x4b7 created by net/http.(*Server).Serve /usr/local/go/src/net/http/server.go:2293 +0x44d

goroutine 1 [IO wait]: net.runtime_pollWait(0x4d69098, 0x72, 0x0) /usr/local/go/src/runtime/netpoll.go:160 +0x59 net.(pollDesc).wait(0xc42014eed0, 0x72, 0xc42004b320, 0xc420010098) /usr/local/go/src/net/fd_poll_runtime.go:73 +0x38 net.(pollDesc).waitRead(0xc42014eed0, 0x46c6d00, 0xc420010098) /usr/local/go/src/net/fd_poll_runtime.go:78 +0x34 net.(netFD).accept(0xc42014ee70, 0x0, 0x46c5580, 0xc4202069a0) /usr/local/go/src/net/fd_unix.go:419 +0x238 net.(TCPListener).accept(0xc42002a0d8, 0x29e8d60800, 0x0, 0x0) /usr/local/go/src/net/tcpsock_posix.go:132 +0x2e net.(TCPListener).AcceptTCP(0xc42002a0d8, 0xc42004b448, 0xc42004b450, 0xc42004b440) /usr/local/go/src/net/tcpsock.go:209 +0x49 net/http.tcpKeepAliveListener.Accept(0xc42002a0d8, 0x4506a68, 0xc420290300, 0x46c9ec0, 0xc4201c4750) /usr/local/go/src/net/http/server.go:2608 +0x2f net/http.(Server).Serve(0xc4200b3000, 0x46c98c0, 0xc42002a0d8, 0x0, 0x0) /usr/local/go/src/net/http/server.go:2273 +0x1ce net/http.(Server).ListenAndServe(0xc4200b3000, 0xc4201c2570, 0x46f9b60) /usr/local/go/src/net/http/server.go:2219 +0xb4 github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo%2ev1.(Echo).run(0xc4200b9680, 0xc4200b3000, 0x0, 0x0, 0x0) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo.v1/echo.go:593 +0x1bf github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo%2ev1.(Echo).Run(0xc4200b9680, 0xc4201c2570, 0x5) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/vendor/gopkg.in/labstack/echo.v1/echo.go:572 +0xc2 main.(App).Run(0xc4200eb6c0) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/server/app.go:137 +0xbe main.RunServer(0xc4200f1200) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/server/main.go:37 +0x4b github.com/iKonrad/typitap/vendor/github.com/codegangsta/cli.Command.Run(0x44c5f8f, 0x3, 0x0, 0x0, 0x0, 0x0, 0x0, 0x44cb7e4, 0xb, 0x0, ...) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/vendor/github.com/codegangsta/cli/command.go:137 +0xa8b github.com/iKonrad/typitap/vendor/github.com/codegangsta/cli.(*App).Run(0xc4200f0fc0, 0xc42000c1e0, 0x2, 0x2, 0x0, 0x0) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/vendor/github.com/codegangsta/cli/app.go:176 +0x919 main.Run(0xc42000c1e0, 0x2, 0x2) /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/server/main.go:28 +0xed main.main() /Users/konrad/Projects/Go/src/github.com/iKonrad/typitap/server/main.go:10 +0x45

goroutine 17 [syscall, locked to thread]: runtime.goexit() /usr/local/go/src/runtime/asm_amd64.s:2086 +0x1`

Any idea? Thanks!

[iKonrad]

Ah I forgot to change the path to the output js file. Now the page loads fine although I'm getting the 'window' error. Any idea how to go around that?