- Issue created by @aldev
I've installed Drupal 10
vendor/bin/drush status | grep "Drupal v"
Drupal version : 10.0.3
Working on getting barrio* installed and correctly subthemed.
my package tools are
composer -V
Composer version 2.5.2 2023-02-04 14:33:22
yarn -v
3.4.1
with composer
composer require \
'drupal/bootstrap_barrio:^5.5' \
'drupal/bootstrap_sass:^5.0'
<code>
then
<code>
cd ${D10_TOP}
cd web/themes/contrib/bootstrap_sass/
chmod +x scripts/create_subtheme.sh
./scripts/create_subtheme.sh
+------------------------------------------------------------------------+
| With this script you could quickly create bootstrap_sass sub-theme |
| In order to use this: |
| - bootstrap_sass theme (this folder) should be in the contrib folder |
+------------------------------------------------------------------------+
The machine name of your custom theme? [e.g. mycustom_bootstrap_sass]
--> mysite_bootstrap_sass
Your theme name ? [e.g. My custom bootstrap_sass]
--> mysite_bootstrap_sass
checking
cd ${D10_TOP}
tree web/themes/custom/mysite_bootstrap_sass -L 1
web/themes/custom/mysite_bootstrap_sass
├── b4.gulpfile.js
├── b4.package.json
├── composer.json
├── config
├── css
├── gulpfile.js
├── images
├── js
├── LICENSE.txt
├── logo.svg
├── package.json
├── README.txt
├── mysite_bootstrap_sass.info.yml
├── mysite_bootstrap_sass.libraries.yml
├── mysite_bootstrap_sass.theme
├── screenshot.png
├── scripts
├── scss
└── templates
pull in the deps
cd web/themes/custom/mysite_bootstrap_sass
touch yarn.lock
yarn
yarn add mdbootstrap
yarn info --name-only
├─ @popperjs/core@npm:2.11.6
├─ barrio_sass@workspace:.
├─ bootstrap-icons@npm:1.10.3
├─ bootstrap@npm:5.2.3
├─ browser-sync@npm:2.27.11
├─ del@npm:3.0.0
├─ gulp-autoprefixer@npm:4.1.0
├─ gulp-clean-css@npm:3.9.4
├─ gulp-concat@npm:2.6.1
├─ gulp-html-replace@npm:1.6.2
├─ gulp-load-plugins@npm:2.0.8
├─ gulp-postcss@npm:8.0.0
├─ gulp-rename@npm:1.4.0
├─ gulp-sass@npm:5.1.0
├─ gulp-scss-lint@npm:1.0.0
├─ gulp-sourcemaps@npm:2.6.5
├─ gulp-uglify@npm:3.0.2
├─ gulp@npm:4.0.2
├─ mdbootstrap@npm:4.20.0
├─ merge-stream@npm:1.0.1
├─ postcss-inline-svg@npm:4.1.0
├─ postcss-pxtorem@npm:5.1.1
└─ sass@npm:1.58.0
EDIT gulpfile.js
...
browserSync.init({
- proxy: 'https://www.drupal.org',
+ proxy: 'https://mysite.net',
});
...
then exec gulp
yarn dlx gulp-cli
fails
yarn dlx gulp-cli
➤ YN0000: ┌ Resolution step
➤ YN0061: │ source-map-resolve@npm:0.5.3 is deprecated: See https://github.com/lydell/source-map-resolve#deprecated
➤ YN0061: │ urix@npm:0.1.0 is deprecated: Please see https://github.com/lydell/urix#deprecated
➤ YN0061: │ resolve-url@npm:0.2.1 is deprecated: https://github.com/lydell/resolve-url#deprecated
➤ YN0061: │ source-map-url@npm:0.4.1 is deprecated: See https://github.com/lydell/source-map-url#deprecated
➤ YN0000: └ Completed in 3s 591ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 230ms
➤ YN0000: ┌ Link step
➤ YN0007: │ es5-ext@npm:0.10.62 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 0s 729ms
➤ YN0000: Done with warnings in 4s 593ms
Error: Your application tried to access autoprefixer, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.
Required package: autoprefixer
Required by: /home/www/drupal/web/themes/custom/mysite_bootstrap_sass/
Require stack:
- /home/www/drupal/web/themes/custom/mysite_bootstrap_sass/gulpfile.js
- /var/lib/wwwrun/.yarn/berry/cache/gulp-cli-npm-2.3.0-acd3fcd6e3-8.zip/node_modules/gulp-cli/lib/shared/require-or-import.js
- /var/lib/wwwrun/.yarn/berry/cache/gulp-cli-npm-2.3.0-acd3fcd6e3-8.zip/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js
- /var/lib/wwwrun/.yarn/berry/cache/gulp-cli-npm-2.3.0-acd3fcd6e3-8.zip/node_modules/gulp-cli/index.js
- /var/lib/wwwrun/.yarn/berry/cache/gulp-cli-npm-2.3.0-acd3fcd6e3-8.zip/node_modules/gulp-cli/bin/gulp.js
at require$$0.Module._resolveFilename (/tmp/xfs-ec3d0f18/dlx-28139/.pnp.cjs:11196:13)
at require$$0.Module._load (/tmp/xfs-ec3d0f18/dlx-28139/.pnp.cjs:11046:42)
at Module.require (node:internal/modules/cjs/loader:1113:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (/home/www/drupal/web/themes/custom/mysite_bootstrap_sass/gulpfile.js:8:18)
at Module._compile (node:internal/modules/cjs/loader:1226:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
at require$$0.Module._extensions..js (/tmp/xfs-ec3d0f18/dlx-28139/.pnp.cjs:11240:33)
at Module.load (node:internal/modules/cjs/loader:1089:32)
at require$$0.Module._load (/tmp/xfs-ec3d0f18/dlx-28139/.pnp.cjs:11077:14)
following/fixing missing deps,
yarn add \
autoprefixer \
postcss
cleaning up, per
https://stackoverflow.com/questions/56647786/replace-autoprefixer-browse...
https://github.com/browserslist/browserslist-example
EDIT gulpfile.js
- autoprefixer = require('autoprefixer'),
.pipe(postcss([autoprefixer({
- browsers: [
- 'Chrome >= 35',
- 'Firefox >= 38',
- 'Edge >= 12',
- 'Explorer >= 10',
- 'iOS >= 8',
- 'Safari >= 8',
- 'Android 2.3',
- 'Android >= 4',
- 'Opera >= 12']
})]))
cat << EOF > .browserslistrc
Chrome >= 35
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 8
Safari >= 8
Android 2.3
Android >= 4
Opera >= 12
not dead
EOF
now
yarn dlx gulp-cli
➤ YN0000: ┌ Resolution step
➤ YN0061: │ source-map-resolve@npm:0.5.3 is deprecated: See https://github.com/lydell/source-map-resolve#deprecated
➤ YN0061: │ resolve-url@npm:0.2.1 is deprecated: https://github.com/lydell/resolve-url#deprecated
➤ YN0061: │ source-map-url@npm:0.4.1 is deprecated: See https://github.com/lydell/source-map-url#deprecated
➤ YN0061: │ urix@npm:0.1.0 is deprecated: Please see https://github.com/lydell/urix#deprecated
➤ YN0000: └ Completed in 2s 70ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0007: │ es5-ext@npm:0.10.62 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 0s 740ms
➤ YN0000: Done with warnings in 3s 65ms
[16:02:11] Using gulpfile /home/www/drupal/web/themes/custom/mysite_bootstrap_sass/gulpfile.js
[16:02:11] Starting 'default'...
[16:02:11] Starting 'styles'...
[16:02:11] 'styles' errored after 22 ms
[16:02:11] Error: File not found with singular glob: /home/www/drupal/web/themes/custom/mysite_bootstrap_sass/node_modules/bootstrap/scss/bootstrap.scss (if this was purposeful, use `allowEmpty` option)
at Glob.<anonymous> (/home/www/drupal/web/themes/custom/mysite_bootstrap_sass/.yarn/cache/glob-stream-npm-6.1.0-13cae37a83-7c9ec7be26.zip/node_modules/glob-stream/readable.js:84:17)
at Object.onceWrapper (node:events:628:26)
at Glob.emit (node:events:513:28)
at Glob.emit (node:domain:489:12)
at Glob._finish (/home/www/drupal/web/themes/custom/mysite_bootstrap_sass/.yarn/cache/glob-npm-7.2.3-2d866d17a5-29452e97b3.zip/node_modules/glob/glob.js:194:8)
at done (/home/www/drupal/web/themes/custom/mysite_bootstrap_sass/.yarn/cache/glob-npm-7.2.3-2d866d17a5-29452e97b3.zip/node_modules/glob/glob.js:179:14)
at Glob._processSimple2 (/home/www/drupal/web/themes/custom/mysite_bootstrap_sass/.yarn/cache/glob-npm-7.2.3-2d866d17a5-29452e97b3.zip/node_modules/glob/glob.js:688:12)
at /home/www/drupal/web/themes/custom/mysite_bootstrap_sass/.yarn/cache/glob-npm-7.2.3-2d866d17a5-29452e97b3.zip/node_modules/glob/glob.js:676:10
at Glob._stat2 (/home/www/drupal/web/themes/custom/mysite_bootstrap_sass/.yarn/cache/glob-npm-7.2.3-2d866d17a5-29452e97b3.zip/node_modules/glob/glob.js:772:12)
at lstatcb_ (/home/www/drupal/web/themes/custom/mysite_bootstrap_sass/.yarn/cache/glob-npm-7.2.3-2d866d17a5-29452e97b3.zip/node_modules/glob/glob.js:764:12)
[16:02:11] 'default' errored after 26 ms
because
find . | grep bootstrap.scss
is not found, since yarn3/berry is setup for pnp (https://yarnpkg.com/features/pnp), and there's no longer any node_modules dir.
manually unplugging
yarn unplug bootstrap
does unpack the file
find . | grep "bootstrap\.scss"
./.yarn/unplugged/bootstrap-virtual-e18bc3481f/node_modules/bootstrap/scss/bootstrap.scss
but it's still not found (path specs in gulpfile.js?)
This is far enough down the rabbit hole to stop and ask first.
Is there any interest or intention in supporting yarn3 pnp with bootstrap_sass' gulb build system?
yarn3 is a common enough env these days.
I just don't know whether it's supported in the Drupal 10 ecosystem in general or for Bootstrap5 SASS specifically.
Active
5.0
Code