sage bootstrap

.stylelintrc.cjs

module.exports = {
  extends: ['@roots/bud-sass/config/stylelint'],
  rules: {
    'import-notation': null,
    'no-empty-source': null,
  },
};

app.scss

@import 'bootstrap/scss/bootstrap';

bud.config.js

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/docs/sage sage documentation}
 * @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
 *
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/app/themes/sage/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/docs/bud.setUrl}
   * @see {@link https://bud.js.org/docs/bud.setProxyUrl}
   * @see {@link https://bud.js.org/docs/bud.watch}
   */
  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('http://example.test')
    .watch(['resources/views', 'app']);

  /**
   * 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}
   */
  app.wpjson    
    .set('settings.color.custom', false)
    .set('settings.color.customDuotone', false)
    .set('settings.color.customGradient', false)
    .set('settings.color.defaultDuotone', false)
    .set('settings.color.defaultGradients', false)
    .set('settings.color.defaultPalette', false)
    .set('settings.color.duotone', [])
    .set('settings.custom.spacing', {})
    .set('settings.custom.typography.font-size', {})
    .set('settings.custom.typography.line-height', {})
    .set('settings.spacing.padding', true)
    .set('settings.spacing.units', ['px', '%', 'em', 'rem', 'vw', 'vh'])
    .set('settings.typography.customFontSize', false)
    .enable();
};

package.json

{
  "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": "latest",
    "@roots/bud-stylelint": "latest",
    "@roots/bud-sass": "latest",
    "@roots/sage": "latest"
  },
  "dependencies": {
    "bootstrap": "^5.2.3"
  }
}

sage v10 bootstrap

Quick start guide for configuring sage to use bootstrap w/ sass.

1. Install dependencies

yarn add @roots/bud-sass --dev

yarn add bootstrap

2. Modify app code

Rename resources/styles/app.css to resources/styles/app.scss.

Replace file contents with:

@import 'bootstrap/scss/bootstrap';

3. Remove unused dependencies (optional)

We no longer need tailwindcss so we can safely remove it:

yarn remove @roots/bud-tailwindcss

Remove the app.wpjson.useTailwindX calls from bud.config.js:

-    .useTailwindColors()
-    .useTailwindFontFamily()
-    .useTailwindFontSize()
     .enable()

4. Configure stylelint (optional)

Install @roots/bud-stylelint:

yarn add @roots/bud-stylelint --dev

Create a stylelint config file at .stylelintrc.cjs.

module.exports = {
  extends: [],
  rules: {},
};

@roots/bud-sass ships with a preset for you to use. It's the same as installing and configuring stylelint with stylelint-config-standard and stylelint-config-recommended-scss.

module.exports = {
  extends: [
+    '@roots/bud-sass/config/stylelint',
  ],
  rules: {},
}

As is, we're breaking two rules from those presets; for the purposes of this guide we'll ignore them.

module.exports = {
  extends: ['@roots/bud-sass/config/stylelint'],
  rules: {
+    'import-notation': null,
+    'no-empty-source': null,
  },
};

5. Maintaining stylelint config

When bud.js updates you will automatically be upgraded to the latest versions of stylelint-config-standard and stylelint-config-recommended-scss. This may cause issues if you are now breaking a newly defined or changed rule. You will either want to make changes to your application or add an override to module.exports.rules.

This is normal. The preset is just supposed to be a base for your own config. There is nothing wrong with overriding rules to suit your preferences or your application's needs.

You could also:

• Not use the @roots/bud-sass/config/stylelint preset and maintain your own config entirely. This will give you maximum control over when updates are applied.
• Make an issue with stylelint-config-standard or stylelint-config-recommended-scss if you disagree with the change.

What you shouldn't do:

• Make an issue in roots/bud (We want to override upstream configurations as little as possible so as to provide a predictable starting point for a large number of diverse projects).