I have created a new block theme from scratch and have added Bud and Tailwind CSS. I have set my bud.config.mjs to settings similar to when I’m using Sage, but I have been unable to build the CSS when building bud build development. However, when I build using bud build production, the CSS compiles.
I have added @roots/bud-wordpress-manifests to see what is output when building and can verify that the .css files are not included in the entrypoints.json or manifest.json when running bud build development. However, they are there when running bud build production.
- I have attempted this with Node v18.7.0 and v16.16.0.
- I’m currently using bud v6.6.10. I’ve tried going back several releases with no luck.
- I’m using bud-sass, but in an attempt to rule that out, I converted to a simple CSS setup but no luck.
Below is my bud.config.mjs
// @ts-check
/**
* Build configuration
*
* @see {@link https://bud.js.org/guides/configure}
* @param {import('@roots/bud').Bud} bud
*/
export default async bud => {
/**
* The bud instance
*/
bud
/**
* Set the project source directory
*/
.setPath('@src', 'assets')
/**
* Set the application entrypoints
* These paths are expressed relative to the '@src' directory
*/
.entry({
app: ['scripts/app.js', 'styles/app.scss'],
editor: ['scripts/editor.js', 'styles/editor.scss'],
})
/**
* Copy static assets from 'assets/' to 'dist/'
*/
.assets([
['images', 'images'], // copy from `@src/images` to `@dist/assets/images`
['fonts', 'fonts'], // copy from `@src/fonts` to `@dist/assets/fonts`
])
/**
* Matched files trigger a page reload when modified
*/
.watch([bud.path('@src/**/*'), 'parts/**/*', 'patterns/**/*', 'templates/**/*'])
/**
* Proxy origin ('WP_HOME')
*/
.proxy("http://sitename.ddev.site")
/**
* Development origin
*/
.serve("http://localhost:3000")
/**
* Make variables available throughout application
*
* @link https://bud.js.org/docs/bud.provide#usage
*/
bud.provide({
/* The following specifies that $ is the default jQuery export */
/* Now, in any module in our application, we can invoke jQuery with $. There is no need to import it */
jquery: ["jQuery", "$"],
})
/* Ensure global styles are made available throughout the sass stylesheets, regardless of scope */
bud.sass.importGlobal([
"@src/styles/base/variables",
])
}
Below is my package.json
{
"name": "kindling",
"private": true,
"browserslist": [
"extends @roots/browserslist-config/current"
],
"engines": {
"node": ">=16.0.0"
},
"scripts": {
"dev": "bud build development",
"prod": "bud build production",
"lint": "npm run lint:js && npm run lint:css",
"lint:js": "eslint assets/scripts",
"lint:css": "stylelint \"assets/**/*.{css,scss,vue}\"",
"test": "npm run lint"
},
"devDependencies": {
"@roots/bud": "6.6.10",
"@roots/bud-eslint": "^6.6.10",
"@roots/bud-postcss": "^6.6.10",
"@roots/bud-prettier": "^6.6.10",
"@roots/bud-sass": "^6.6.10",
"@roots/bud-stylelint": "^6.6.10",
"@roots/bud-tailwindcss": "6.6.10",
"@roots/bud-wordpress-manifests": "^6.6.10",
"@roots/eslint-config": "^6.6.10",
"@tailwindcss/typography": "^0.5.8",
"stylelint": "^14.13.0"
},
"dependencies": {
"caniuse-lite": "^1.0.30001406"
}
}
Any thoughts on why this would work for production but not development?