search

gobuffalo / buffalo

Rapid Web Development w/ Go
http://gobuffalo.io
MIT License
8.08k stars 577 forks source link

Bootstrap compilation requires autoprefixer - not included in webpack today #1989

Closed arunsworld closed 4 years ago

arunsworld commented 4 years ago

Description

Compiling bootstrap from sass as part of webpack build pipeline requires autoprefixer to work correctly (https://getbootstrap.com/docs/4.0/getting-started/build-tools/)

However, this is not included in the default webpack config.

I'm very happy to submit a PR for this if this issue is accepted.

Steps to Reproduce the Problem

  1. Setup a buffalo application with webpack enabled
  2. In index.plush.html add the following lines of HTML somewhere in the body: <input type="range" class="custom-range" id="customRange1">
  3. Note that the range is not shown correctly like it should (https://getbootstrap.com/docs/4.1/components/forms/#range)

Expected Behavior

Custom range should be rendered as per documentation.

Actual Behavior

Actual rendering is unusable because vendor prefixes are missing.

The class custom-range is missing vendor prefix (eg. -webkit-appearance:none).

To fix this we need to have postcss-loader in webpack config with autoprefixer plugin.

Happy to provide PR.

Info

Please run buffalo info and paste the information below where it says "PASTE_HERE".

``` -> Go: Checking installation ✓ The `go` executable was found on your system at: /usr/local/go/bin/go -> Go: Checking minimum version requirements ✓ Your version of Go, 1.14.2, meets the minimum requirements. -> Go: Checking Package Management ✓ You are using Go Modules (`go`) for package management. -> Go: Checking PATH ✓ Your PATH contains /Users/abarua/go/bin. -> Node: Checking installation ✓ The `node` executable was found on your system at: /usr/local/bin/node -> Node: Checking minimum version requirements ✓ Your version of Node, v12.16.3, meets the minimum requirements. -> NPM: Checking installation ✓ The `npm` executable was found on your system at: /usr/local/bin/npm -> NPM: Checking minimum version requirements ✓ Your version of NPM, 6.14.4, meets the minimum requirements. -> Yarn: Checking installation ✓ The `yarnpkg` executable was found on your system at: /usr/local/bin/yarnpkg -> Yarn: Checking minimum version requirements ✓ Your version of Yarn, 1.22.4, meets the minimum requirements. -> PostgreSQL: Checking installation ✘ The `postgres` executable could not be found on your system. For help setting up your Postgres environment please follow the instructions for you platform at: https://www.postgresql.org/download/ -> MySQL: Checking installation ✘ The `mysql` executable could not be found on your system. For help setting up your MySQL environment please follow the instructions for you platform at: https://www.mysql.com/downloads/ -> SQLite3: Checking installation ✓ The `sqlite3` executable was found on your system at: /Users/abarua/anaconda3/bin/sqlite3 -> SQLite3: Checking minimum version requirements ✓ Your version of SQLite3, 3.31.1, meets the minimum requirements. -> Cockroach: Checking installation ✘ The `cockroach` executable could not be found on your system. For help setting up your Cockroach environment please follow the instructions for you platform at: https://www.cockroachlabs.com/docs/stable/ -> Buffalo (CLI): Checking installation ✓ The `buffalo` executable was found on your system at: /Users/abarua/go/bin/buffalo -> Buffalo (CLI): Checking minimum version requirements ✓ Your version of Buffalo (CLI), v0.16.8, meets the minimum requirements. -> Buffalo: Application Details Pwd /Users/abarua/go/src/github.com/arunsworld/bootstrap_webapp Root /Users/abarua/go/src/github.com/arunsworld/bootstrap_webapp GoPath /Users/abarua/go PackagePkg github.com/arunsworld/bootstrap_webapp ActionsPkg github.com/arunsworld/bootstrap_webapp/actions ModelsPkg github.com/arunsworld/bootstrap_webapp/models GriftsPkg github.com/arunsworld/bootstrap_webapp/grifts WithModules true Name bootstrap-webapp Bin bin/bootstrap-webapp VCS git WithPop true WithSQLite false WithDep false WithWebpack true WithNodeJs true WithYarn true WithDocker true WithGrifts true AsWeb true AsAPI false InApp true PackageJSON {map[build:webpack -p --progress dev:webpack --watch]} -> Buffalo: config/buffalo-app.toml name = "bootstrap-webapp" bin = "bin/bootstrap-webapp" vcs = "git" with_pop = true with_sqlite = false with_dep = false with_webpack = true with_nodejs = true with_yarn = true with_docker = true with_grifts = true as_web = true as_api = false -> Buffalo: config/buffalo-plugins.toml [[plugin]] binary = "buffalo-pop" go_get = "github.com/gobuffalo/buffalo-pop/v2" -> Buffalo: go.mod module github.com/arunsworld/bootstrap_webapp go 1.14 require ( github.com/gobuffalo/buffalo v0.16.8 github.com/gobuffalo/buffalo-pop/v2 v2.0.6 github.com/gobuffalo/envy v1.9.0 github.com/gobuffalo/mw-csrf v1.0.0 github.com/gobuffalo/mw-forcessl v0.0.0-20180802152810-73921ae7a130 github.com/gobuffalo/mw-i18n v0.0.0-20190129204410-552713a3ebb4 github.com/gobuffalo/mw-paramlogger v0.0.0-20190129202837-395da1998525 github.com/gobuffalo/packr/v2 v2.8.0 github.com/gobuffalo/pop/v5 v5.1.1 github.com/gobuffalo/suite/v3 v3.0.0 github.com/markbates/grift v1.5.0 github.com/unrolled/secure v0.0.0-20190103195806-76e6d4e9b90c ) ```
paganotoni commented 4 years ago

hey @arunsworld 👋, Thanks for reporting this one, I've had the same issue. Do you have an idea what the fix would be in web pack?.

arunsworld commented 4 years ago

Yes, I've fixed it in a fork and it works for me. I've raised a PR to capture the details: https://github.com/gobuffalo/buffalo/pull/1990

paganotoni commented 4 years ago

Thanks! Closing this one given your PR was already merged. Thanks @arunsworld