1. I added first
“devDependencies”: {
“@roots/bud”: “^6.11.0”,
“@roots/bud-postcss”: “^6.11.0”,
“@roots/bud-sass”: “^6.11.0”,
“@roots/bud-tailwindcss”: “^6.11.0”,
“@roots/sage”: “^6.11.0”
},
“dependencies”: {
“tailwindcss”: “^3.3.0”
}
then run yarn install
2. in bud.config.js i have
import { join } from ‘path’;
import tailwind from ‘@roots/bud-tailwindcss’;
import postcss from ‘@roots/bud-postcss’;
import sass from ‘@roots/bud-sass’;
/**
- Build configuration
- @see {@link https://roots.io/docs/sage/ sage documentation}
- @see {@link https://bud.js.org/guides/configure/ bud.js configuration guide}
- @typedef {import(‘@roots/bud’).Bud} Bud
-
@param {Bud} app
*/
export default (app) => {
app.use(tailwind);
app.use(postcss);
app.use(sass);
app.entry(‘app’, [
join(app.paths.resources, ‘styles/app.scss’),
join(app.paths.resources, ‘scripts/app.js’),
]);
app.styles({
loader: {
implementation: ‘sass’,
},
});
app.postcss(({ options }) => {
options.preset = {
stage: false,
autoprefixer: app.enabled(‘autoprefixer’),
features: {
‘nesting-rules’: true,
},
};
});
app.tailwind(require(‘./tailwind.config.js’));
};
/**
* Directory contents to be included in the compilation
* @see {@link https://bud.js.org/docs/bud.assets/}
*/
.assets(['images'])
/**
* Matched files trigger a page reload when modified
* @see {@link https://bud.js.org/docs/bud.watch/}
*/
.watch(['resources/views', 'app'])
/**
* Proxy origin (`WP_HOME`)
* @see {@link https://bud.js.org/docs/bud.proxy/}
*/
.proxy('http://localhost')
/**
* Development origin
* @see {@link https://bud.js.org/docs/bud.serve/}
*/
.serve('http://localhost')
/**
* URI of the `public` directory
* @see {@link https://bud.js.org/docs/bud.setPublicPath/}
*/
.setPublicPath('/app/themes/sage/public/')
/**
* Generate WordPress `theme.json`
*
* @note This overwrites `theme.json` on every build.
*
* @see {@link https://bud.js.org/extensions/sage/theme.json/}
* @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/}
*/
.wpjson.settings({
color: {
custom: false,
customDuotone: false,
customGradient: false,
defaultDuotone: false,
defaultGradients: false,
defaultPalette: false,
duotone: [],
},
custom: {
spacing: {},
typography: {
'font-size': {},
'line-height': {},
},
},
spacing: {
padding: true,
units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
},
typography: {
customFontSize: false,
},
})
.useTailwindColors()
.useTailwindFontFamily()
.useTailwindFontSize()
.enable();
app.styles({
loader: {
implementation: ‘sass’,
},
});
app.postcss(({ options }) => {
options.preset = {
stage: false,
autoprefixer: app.enabled(‘autoprefixer’),
features: {
‘nesting-rules’: true,
},
};
});
3.in app.scss added
@import ‘tailwindcss/base’;
@import ‘tailwindcss/components’;
@import ‘tailwindcss/utilities’;
in tailwind.config.js
module.exports = {
content: [‘./resources//*.blade.php’, './resources//.js’, './resources/**/.vue’],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: ,
};
when i run yarn build i recived this error:
/mnt/c/xampp/htdocs/BalkanBurrito/wp-content/themes/WEBTIK.BG/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
throw ex;
^
Error reading config file:
bud.config.js appears to be a bud config file, but it could not be imported.
Original error follows:
SyntaxError: Unexpected token ‘.’
at file:///mnt/c/xampp/htdocs/BalkanBurrito/wp-content/themes/WEBTIK.BG/node_modules/@roots/bud/lib/context/config.js:62:31
at async Promise.all (index 6)
at async Module.get (file:///mnt/c/xampp/htdocs/BalkanBurrito/wp-content/themes/WEBTIK.BG/node_modules/@roots/bud/lib/context/config.js:49:5)
at async default (file:///mnt/c/xampp/htdocs/BalkanBurrito/wp-content/themes/WEBTIK.BG/node_modules/@roots/bud/lib/context/index.js:28:18)
at async file:///mnt/c/xampp/htdocs/BalkanBurrito/wp-content/themes/WEBTIK.BG/node_modules/@roots/bud/lib/cli/app.js:15:17
error Command failed with exit code 7.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Please guys helpp… thanksss