[bug] Sass with Tailwind config gives an error
kjvdven opened this issue · comments
Agreement
- This is not a duplicate of an existing issue
- I have read the guidelines for Contributing to Roots Projects
- This is not a personal support request that should be posted on the Roots Discourse community
Describe the issue
I started a new Wordpress theme with Sage and bud and the only thing I did was to add sass to the project, following the docs and the temp fix from issue #2311.
But when running the template with bud-sass
and bud-tailwindcss
the project won't build correctly and bud throws an error.
[fs] [tailwind.config.js] › ⚠ tailwind.config.js causes an exception when imported.
Since tailwind.config.js does not appear to be a bud configuration file, bud.js is not throwing. Original error follows:
BudError: defaultTheme is not defined
If I run the project with only one of the plugins, there are no errors.
Expected Behavior
For Bud.js to run with 0 errors.
Actual Behavior
Bud.js runs with errors.
Steps To Reproduce
- Setup a new Theme via Sage
- Add the sass plugin to Bud.js as described in the docs
yarn run
version
6.12.3
Logs
No response
Configuration
{
"name": "sage",
"private": true,
"browserslist": [
"extends @roots/browserslist-config"
],
"engines": {
"node": ">=16.0.0"
},
"type": "module",
"scripts": {
"dev": "bud dev",
"build": "bud build",
"translate": "yarn translate:pot && yarn translate:update",
"translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
"translate:update": "wp i18n update-po ./resources/lang/sage.pot ./resources/lang/*.po",
"translate:compile": "yarn translate:mo && yarn translate:js",
"translate:js": "wp i18n make-json ./resources/lang --pretty-print",
"translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
},
"devDependencies": {
"@roots/bud": "6.12.3",
"@roots/bud-sass": "^6.12.3",
"@roots/bud-tailwindcss": "^6.12.3",
"@roots/sage": "6.12.3",
"sass": "1.62.1"
},
"dependencies": {}
}
Relevant .budfiles
No response
I'm not able to reproduce this
This warning message is telling you that there is a reference to defaultTheme
somewhere in your tailwind config and that it is undefined
. You may have copy/pasted code that includes defaultTheme
, or you may have just forgotten to import it.
The warning is emitted very early, way before bud.js and any of its services or extensions have been instantiated -- you'd get the same error trying to import your tailwind config from a generic module or the node repl.
Likely fixes: adding import defaultTheme from 'tailwindcss/defaultTheme'
to the top of your tailwind config. Or removing the defaultTheme
reference from the config.
See related questions like: tailwindlabs/tailwindcss#9596.
I don't think this has anything to do with @roots/bud-sass
or @roots/bud-tailwindcss
. If you think it is something we're doing please provide a repo or codesandbox or something so we can better assist you.