How to use Bootstrap 5 with sage 10 beta 2

Hello

Just installed sage 10b2 and added bootstrap as I did before Bud.
But after removing Tailwind no CSS is generated and bootstrap is not found.
Any advice on how to proceed with the latest beta to use Bootstrap?

Thanks
Aldo

Howdy! What have you tried so far? :eyes:

Hej! I made the same changes as I di before Bud:

  1. Add bootstrap via yarn
  2. Changed the tailwind references in the app.css to bootstrap
  3. Added @import “~bootstrap/scss/bootstrap”; to app.css
  4. Added some custom classes to app.css

When running yarn build I get the following error:
Error: Failed to find ‘~/bootstrap/scss/bootstrap’

What am I missing?

Try renaming your .css files to .scss, along with adding the @roots/bud-sass package

Thanks for the feedback.

  1. Added @roots/bud-sass and it appears as dependency
  2. Changed to .scss and accordingly in bud.config.js
  3. When running yarn build, I get the following error:

✘ Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can’t find stylesheet to import.

5 │ @import ‘~/bootstrap/scss/bootstrap’;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

resources/styles/config/external.scss 5:9 @import

I think you can try some other paths besides ~bootstrap to get the import working

cc @kellymears

I tried pretty everything with no success.

Do you mind giving me some of the paths you tried? I was thinking of at least a few different ways of targeting the node_modules folder directly to give it a shot

I can give this attempt soon! We’ll also be getting an extension in Bud for Bootstrap to avoid this

Returned an error:
@import ‘~/bootstrap/scss/bootstrap’;
@import ‘./bootstrap/scss/bootstrap’;
@import ‘bootstrap/scss/bootstrap’;

Returned no error, but no Bootstrap code included in the generated CSS:
@import ‘~/node_modules/bootstrap/scss/bootstrap’;
@import ‘./node_modules/bootstrap/scss/bootstrap’;

Try some valid paths instead of ~/ and ./?

../
../../

etc.

@import '../../../node_modules/bootstrap/scss/bootstrap';
returns no error, but still no code.
BTW: the app.907205.css filename remains the same after each build. Is this intended?

@abombelli have you installed @roots/bud-sass? It is required to import sass now (it isn’t provided by roots/sage, it’s opt-in).

Regardless, I’m on 5.3.1 and can do either:

@import 'bootstrap/scss/bootstrap';

or

@import 'bootstrap'

and it seems to work a-ok!

@kellymears Thanks for getting back.
Yes, installed it:

  "devDependencies": {
    "@roots/bud": "^5.2.0",
    "@roots/bud-eslint": "^5.2.0",
    "@roots/bud-postcss": "^5.2.0",
    "@roots/bud-prettier": "^5.2.0",
    "@roots/bud-sass": "^5.2.0",
    "@roots/bud-stylelint": "^5.2.0",
    "@roots/sage": "^5.2.0",
    "sass-loader": "^12.4.0"
  },
  "dependencies": {
    "bootstrap": "^5.1.3"
  }

But not @import 'bootstrap/scss/bootstrap'; returns an error and @import 'bootstrap'; no error, but no BS CSS is included.
As mentioned before, the generated css has alway the same name: app.907205.css should this not change?

And at the ned I get this:
✘ Could not find "@roots/bud-tailwindcss/stylelint-config". Do you need a configBasedir?

What else could be missing?

I would update everything to 5.3.0 and drop sass-loader. i don’t think you need to specify @roots/bud-postcss either but it probably isn’t causing an issue.

  "devDependencies": {
    "@roots/bud": "5.3.0",
    "@roots/bud-eslint": "5.3.0",
    "@roots/bud-prettier": "5.3.0",
    "@roots/bud-sass": "5.3.0",
    "@roots/bud-stylelint": "5.3.0",
    "@roots/sage": "5.3.0",
 }

It doesn’t seem like you’re using @roots/bud-tailwindcss so you can remove that from stylelint config.

{
  "extends": [
    "@roots/bud-sass/stylelint-config",
    "@roots/sage/stylelint-config"
  ]
}

since you don’t have it installed it can’t find "@roots/bud-tailwindcss/stylelint-config"

that might be the only error, actually. but 5.3.0 is a much better release than 5.2.0, regardless.

1 Like

@kellymears Thanks for the feedback.

Updates as mentioned:

{
  "name": "sage",
  "private": true,
  "bud": {
    "location": {
      "src": "resources",
      "dist": "public"
    }
  },
  "browserslist": [
    "extends @wordpress/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "lint": "npm run lint:js && npm run lint:css",
    "lint:js": "eslint resources/scripts",
    "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
    "test": "npm run lint"
  },
  "devDependencies": {
    "@roots/bud": "^5.3.1",
    "@roots/bud-eslint": "^5.3.1",
    "@roots/bud-prettier": "^5.3.1",
    "@roots/bud-sass": "^5.3.1",
    "@roots/bud-stylelint": "^5.3.1",
    "@roots/sage": "^5.3.1"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.2",
    "bootstrap": "^5.1.3"
  }
}

The only error, I get is:

Could not find "@roots/bud-tailwindcss/stylelint-config". Do you need a `configBasedir`?

Where is the file to remove the extends?

What I also notices is, that the files in the public folder do not get generated/updated.
has this to do with the error related to @roots/bud-tailwindcss/stylelint-config?

1 Like

@kellymears
I removed that from the stylist config.

Now I get the following error:

No configuration provided for /volume1/Development/projects/site/web/app/themes/s-b/resources/styles/editor.scss

Sorry, I removed everything, just needed to get rid of this line:
@roots/bud-tailwindcss/stylelint-config”

Thanks a lot!

1 Like

Had to add some rules, to use @extend, etc.

{
  "extends": "@roots/sage/stylelint-config",
  "rules": {
    "declaration-colon-newline-after": null,
    "value-list-comma-newline-after": null,
    "no-empty-source": null,
    "no-descending-specificity": null,
    "at-rule-empty-line-before": null,
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": [
          "extend",
          "at-root",
          "debug",
          "warn",
          "error",
          "if",
          "else",
          "for",
          "each",
          "while",
          "mixin",
          "include",
          "content",
          "return",
          "tailwind",
          "apply",
          "responsive",
          "variants",
          "screen",
          "function"
        ]
      }
    ]
  }
}
1 Like