Roots Discourse

Apply Sage's Webpack configuration to non-WordPress website

I really like Sage’s Webpack setup. I now want to use the same configuration to develop a non-WordPress website. I got everything to work nicely (yarn, yarn build, Browsersync, etc.), but I cant get yarn start to automatically insert CSS into the browser after changes have been made (Browsersync does say it finished building).

Reading these forums it shows that most of the times the problem stems from config.json so I include mine below. My dist folder is outputted in static, so I guess publicPath is correct.

Is it possible to use Sage’s Webpack setup for a non-WordPress website? Is my config correct? Any ideas on what goes wrong?

{
  "entry": {
    "main": [
      "scripts/main.js",
      "styles/main.scss"
    ]
  },
  "publicPath": "/static",
  "devUrl": "https://mydomain.com",
  "proxyUrl": "https://192.168.144.2:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "**/*.py",
    "**/*.html"
  ]
}

The new Sage 10 uses Laravel Mix. If you would like to use the new approach, you can get started here.

For the Sage 9 approach, you can review package.json, .stylelintrc.js, .eslintrc.js, config.json and build.

1 Like

Thanks for your response and advice. I’m now using Laravel Mix :)!