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? 
Hej! I made the same changes as I di before Bud:
- Add bootstrap via yarn
- Changed the tailwind references in the app.css to bootstrap
- Added @import â~bootstrap/scss/bootstrapâ; to app.css
- 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.
- Added @roots/bud-sass and it appears as dependency
- Changed to .scss and accordingly in bud.config.js
- 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"
]
}
]
}
}
2 Likes