Explore all Gulp open source software, libraries, packages, source code, cloud functions and APIs.
Popular New Releases in Gulp
bootstrap
4.6.1
grunt
sage
v10.1.5
codeigniter-restserver
3.1.4
yo
Popular Libraries in Gulp
bootstrap
by twbs 
javascript
156587 MIT
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
web-starter-kit
by google html
18480 Apache-2.0
Web Starter Kit - a workflow for multi-device websites
grunt
by gruntjs javascript
12135 NOASSERTION
Grunt: The JavaScript Task Runner
sage
by roots php
11698 MIT
WordPress starter theme with Laravel Blade components and templates, Tailwind CSS, and a modern development workflow
vanillawebprojects
by bradtraversy javascript
10938
Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries
html-webpack-plugin
by jantimon javascript
9669 MIT
Simplifies creation of HTML files to serve your webpack bundles
50projects50days
by bradtraversy css
8907
50+ mini web projects using HTML, CSS & JS
google-webfonts-helper
by majodev javascript
8473 MIT
A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets
complete-javascript-course
by jonasschmedtmann javascript
8387
Starter files, final projects, and FAQ for my Complete JavaScript course
Trending New libraries in Gulp
vanillawebprojects
by bradtraversy javascript
10938
Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries
50projects50days
by bradtraversy css
8907
50+ mini web projects using HTML, CSS & JS
volt-bootstrap-5-dashboard
by themesberg html
2032 MIT
⚡️ Volt - Bootstrap 5 Admin Dashboard Template with vanilla Javascript
rpg-cli
by facundoolano rust
1128 MIT
Your filesystem as a dungeon!
Modern-HTML-Starter-Template
by harryheman html
758 MIT
Modern HTML Starter Template
halo-theme-sakura
by LIlGG css
410 MIT
Halo 版本的樱花🌸主题
minwiz
by zeplia typescript
321 BSD-2-Clause
Minimal starter kit for under 2 KB sites
html-css-course
by jonasschmedtmann html
230
Starter files, final projects, and FAQ for my HTML + CSS course
tailwindcss-from-zero-to-production
by tailwindlabs javascript
190
Source code for the "Tailwind CSS Up and Running" screencast series.
Top Authors in Gulp
1
46 Libraries
6820
2
33 Libraries
146
3
24 Libraries
150
4
21 Libraries
827
5
14 Libraries
235
6
12 Libraries
186
7
11 Libraries
66
8
11 Libraries
16625
9
10 Libraries
1329
10
10 Libraries
4176
1
46 Libraries
6820
2
33 Libraries
146
3
24 Libraries
150
4
21 Libraries
827
5
14 Libraries
235
6
12 Libraries
186
7
11 Libraries
66
8
11 Libraries
16625
9
10 Libraries
1329
10
10 Libraries
4176
Trending Kits in Gulp
No Trending Kits are available at this moment for Gulp
Trending Discussions on Gulp
how to solve running gcc failed exist status 1 in mac m1?
Getting ` Error [ERR_REQUIRE_ESM]` while running `gulp` command
How to import a Javascript file that is ESM from a CommonJS module? Gulp. Error: [ERR_REQUIRE_ESM]
Why would tee fail to write to stdout?
How can I use template literals in an .env file?
Angular build - Unmatched selector: %
Liferay Theme Creation : Error During gulp build and gulp deploy
Bootstrap modal being rendered inside side bar
Building a Liferay theme fails with an error "Cannot find module 'liferay-font-awesome'"
Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)
QUESTION
how to solve running gcc failed exist status 1 in mac m1?
Asked 2022-Apr-03 at 17:38I have already brew install mingw-w64. When i check the versions its there.
gcc --version:
gcc (Homebrew GCC 11.2.0_3) 11.2.0.
g++ --version:
g++ (Homebrew GCC 11.2.0_3) 11.2.0
I also run which gcc:
/opt/homebrew/bin/gcc
Then I run my docker-compose with image golang:latest. No errors yet
1up to date, audited 370 packages in 10m
2
39 packages are looking for funding
4 run `npm fund` for details
5
66 high severity vulnerabilities
7
8To address issues that do not require attention, run:
9 npm audit fix
10
11To address all issues (including breaking changes), run:
12 npm audit fix --force
13
14Run `npm audit` for details.
15Unlinking stale socket /tmp/supervisor.sock
16[15:30:39] Using gulpfile /go/src/github.com/projectname/src/api/gulpfile.js
17[15:30:39] Starting 'default'...
18[15:30:39] Starting 'watch'...
19When I save a .go file it downloads all mods and this is the error:
1up to date, audited 370 packages in 10m
2
39 packages are looking for funding
4 run `npm fund` for details
5
66 high severity vulnerabilities
7
8To address issues that do not require attention, run:
9 npm audit fix
10
11To address all issues (including breaking changes), run:
12 npm audit fix --force
13
14Run `npm audit` for details.
15Unlinking stale socket /tmp/supervisor.sock
16[15:30:39] Using gulpfile /go/src/github.com/projectname/src/api/gulpfile.js
17[15:30:39] Starting 'default'...
18[15:30:39] Starting 'watch'...
19 # github.com/projectname/api
20 /usr/local/go/pkg/tool/linux_arm64/link: running gcc failed: exit status 1
21 collect2: fatal error: cannot find 'ld'
22 compilation terminated.
23
24 [15:46:23] 'build-binary' errored after 1.98 s
25 [15:46:23] Error in plugin "gulp-shell"
26 Message:
27 Command `go build` failed with exit code 2
28This is my Dockerfile:
1up to date, audited 370 packages in 10m
2
39 packages are looking for funding
4 run `npm fund` for details
5
66 high severity vulnerabilities
7
8To address issues that do not require attention, run:
9 npm audit fix
10
11To address all issues (including breaking changes), run:
12 npm audit fix --force
13
14Run `npm audit` for details.
15Unlinking stale socket /tmp/supervisor.sock
16[15:30:39] Using gulpfile /go/src/github.com/projectname/src/api/gulpfile.js
17[15:30:39] Starting 'default'...
18[15:30:39] Starting 'watch'...
19 # github.com/projectname/api
20 /usr/local/go/pkg/tool/linux_arm64/link: running gcc failed: exit status 1
21 collect2: fatal error: cannot find 'ld'
22 compilation terminated.
23
24 [15:46:23] 'build-binary' errored after 1.98 s
25 [15:46:23] Error in plugin "gulp-shell"
26 Message:
27 Command `go build` failed with exit code 2
28FROM golang:1.17.0-alpine3.14 AS builder
29
30RUN apk update && apk add gcc make git libc-dev binutils-gold
31
32# Install dependencies
33RUN apk add --update tzdata \
34 --no-cache ca-certificates git wget \
35 nodejs npm \
36 g++ \
37 supervisor \
38 && update-ca-certificates \
39 && npm install -g gulp gulp-shell
40RUN npm install -g yarn
41
42
43COPY ops/api/local/supervisor /etc
44ENV PATH $PATH:/go/bin
45WORKDIR /go/src/github.com/projectname/src/api
46ANSWER
Answered 2022-Apr-02 at 20:06Try and check if, as in this Dockerfile, adding binutils-gold would allow you to use ld.
1up to date, audited 370 packages in 10m
2
39 packages are looking for funding
4 run `npm fund` for details
5
66 high severity vulnerabilities
7
8To address issues that do not require attention, run:
9 npm audit fix
10
11To address all issues (including breaking changes), run:
12 npm audit fix --force
13
14Run `npm audit` for details.
15Unlinking stale socket /tmp/supervisor.sock
16[15:30:39] Using gulpfile /go/src/github.com/projectname/src/api/gulpfile.js
17[15:30:39] Starting 'default'...
18[15:30:39] Starting 'watch'...
19 # github.com/projectname/api
20 /usr/local/go/pkg/tool/linux_arm64/link: running gcc failed: exit status 1
21 collect2: fatal error: cannot find 'ld'
22 compilation terminated.
23
24 [15:46:23] 'build-binary' errored after 1.98 s
25 [15:46:23] Error in plugin "gulp-shell"
26 Message:
27 Command `go build` failed with exit code 2
28FROM golang:1.17.0-alpine3.14 AS builder
29
30RUN apk update && apk add gcc make git libc-dev binutils-gold
31
32# Install dependencies
33RUN apk add --update tzdata \
34 --no-cache ca-certificates git wget \
35 nodejs npm \
36 g++ \
37 supervisor \
38 && update-ca-certificates \
39 && npm install -g gulp gulp-shell
40RUN npm install -g yarn
41
42
43COPY ops/api/local/supervisor /etc
44ENV PATH $PATH:/go/bin
45WORKDIR /go/src/github.com/projectname/src/api
46RUN apk update && apk add gcc make git libc-dev binutils-gold
47(First seen in nodejs/node issue 4212)
QUESTION
Getting ` Error [ERR_REQUIRE_ESM]` while running `gulp` command
Asked 2022-Mar-09 at 06:35I'm new to Gulp and trying to automate some tasks. Here's my environment setup: npm version: 8.1.0, node version 17.0.1, gulp CLI version 2.3.0 and gulp version 4.0.2
And here's my gulpfile.js:
1// list of dependencies ( things require to run the below funcitions)
2const { src, dest, watch, series } = require('gulp');
3const sass = require('gulp-sass');
4const prefix = require('gulp-autoprefixer');
5const minify = require('gulp-clean-css');
6const terser = require('gulp-terser');
7const imagemin = require('gulp-imagemin');
8const imagewebp = require('gulp-webp');
9
10
11
12// create functions
13
14
15// SCSS
16function compilescss() {
17 return src('src/scss/*.scss')
18 .pipe(sass())
19 .pipe(prefix('last 2 versions'))
20 .pipe(minify())
21 .pipe(dest('/dist/css'))
22}
23
24
25// JS
26function jsmin(){
27 return src('src/js/*.js')
28 .pipe(terser())
29 .pipe(dest('dist/js'))
30}
31
32// images
33function optimizeimg() {
34 return src('src/img/*.{jpg,png}')
35 .pipe(imagemin([
36 imagemin.mozjpeg({quality: 80, progressive: true}),
37 imagemin.optipng({optiminzationLevel: 2})
38 ]))
39 .pipe(dest('dist/img'))
40}
41
42
43// webp images
44function webpImage() {
45 return src('dist/img/*.{jpg, png}')
46 .pipe(imagewebp())
47 .pipe('dist/img')
48}
49
50
51// create watchlist
52function watchTask(){
53 watch('src/scss/*.scss', compilescss);
54 watch('src/js/*.js', jsmin);
55 watch('src/img/*.{jpg,png}', optimizeimg);
56 watch('dist/img/*.{jpg,png}', webpImage);
57}
58
59
60
61// default gulp
62exports.default = series(
63 compilescss,
64 jsmin,
65 optimizeimg,
66 webpImage,
67 watchTask
68);
69When I'm trying to run gulp command in the terminal. I'm getting errors like - Error [ERR_REQUIRE_ESM]: require() of ES Module E:\Projects\portfolio\node_modules\gulp-imagemin\index.js from E:\Projects\portfolio\gulpfile.js not supported.
I've tried solutions like - adding type:"module" in package.json and instead of require() used import but I couldn't make it work. So how can I fix this??? Thanks!
ANSWER
Answered 2021-Nov-15 at 01:42gulp-imagemin 8.0.0 and above are now ESM only. You can downgrade gulp-imagemin to 7.1.0 which is commonjs and it should work fine.
This package is now pure ESM. Please read this.
https://github.com/sindresorhus/gulp-imagemin/releases/tag/v8.0.0
QUESTION
How to import a Javascript file that is ESM from a CommonJS module? Gulp. Error: [ERR_REQUIRE_ESM]
Asked 2022-Feb-12 at 17:22My project is entirely written as CommonJS module and I don't plan to change it. The problem is that I have to use a library that is ESM when using gulp.
The file where this situation appears:
1const { dest, src } = require('gulp')
2const imagemin = require('gulp-imagemin') // This is a ESM. Compiler gives error [ERR_REQUIRE_ESM]
3
4
5const images = () => {
6 // We have specific configs for jpeg and png files to try
7 // to really pull down asset sizes
8 return src('./src/images/**/*')
9 .pipe(
10 imagemin(
11 [
12 imagemin.mozjpeg({ quality: 60, progressive: true }),
13 imagemin.optipng({ optimizationLevel: 5, interlaced: null })
14 ],
15 {
16 silent: true
17 }
18 )
19 )
20 .pipe(dest('./dist/images'))
21}
22
23module.exports = images
24This is the error that node gives
1const { dest, src } = require('gulp')
2const imagemin = require('gulp-imagemin') // This is a ESM. Compiler gives error [ERR_REQUIRE_ESM]
3
4
5const images = () => {
6 // We have specific configs for jpeg and png files to try
7 // to really pull down asset sizes
8 return src('./src/images/**/*')
9 .pipe(
10 imagemin(
11 [
12 imagemin.mozjpeg({ quality: 60, progressive: true }),
13 imagemin.optipng({ optimizationLevel: 5, interlaced: null })
14 ],
15 {
16 silent: true
17 }
18 )
19 )
20 .pipe(dest('./dist/images'))
21}
22
23module.exports = images
24Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Lucas\Documents\repos\nexus-materiales\node_modules\gulp-imagemin\index.js from C:\Users\Lucas\Documents\repos\nexus-materiales\gulp-tasks\images.js not supported.
25Instead change the require of index.js in C:\Users\Lucas\Documents\repos\nexus-materiales\gulp-tasks\images.js to a dynamic import() which is available in all CommonJS modules.
26 at Object.<anonymous> (C:\Users\Lucas\Documents\repos\nexus-materiales\gulp-tasks\images.js:2:18)
27 at Object.<anonymous> (C:\Users\Lucas\Documents\repos\nexus-materiales\gulpfile.js:4:16)
28 at async Promise.all (index 0) {
29 code: 'ERR_REQUIRE_ESM'
30}
31So, How could I include this file using commonJS if it's an ESM? Is this possible?
ANSWER
Answered 2022-Feb-12 at 16:54To import an ES module from CommonJS code, use a dynamic import.
ES module imports are asynchronous: you'll have to make sure that the gulp-imagemin import has completed before creating the gulp stream. This can be achieved with gulp.series.
1const { dest, src } = require('gulp')
2const imagemin = require('gulp-imagemin') // This is a ESM. Compiler gives error [ERR_REQUIRE_ESM]
3
4
5const images = () => {
6 // We have specific configs for jpeg and png files to try
7 // to really pull down asset sizes
8 return src('./src/images/**/*')
9 .pipe(
10 imagemin(
11 [
12 imagemin.mozjpeg({ quality: 60, progressive: true }),
13 imagemin.optipng({ optimizationLevel: 5, interlaced: null })
14 ],
15 {
16 silent: true
17 }
18 )
19 )
20 .pipe(dest('./dist/images'))
21}
22
23module.exports = images
24Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Lucas\Documents\repos\nexus-materiales\node_modules\gulp-imagemin\index.js from C:\Users\Lucas\Documents\repos\nexus-materiales\gulp-tasks\images.js not supported.
25Instead change the require of index.js in C:\Users\Lucas\Documents\repos\nexus-materiales\gulp-tasks\images.js to a dynamic import() which is available in all CommonJS modules.
26 at Object.<anonymous> (C:\Users\Lucas\Documents\repos\nexus-materiales\gulp-tasks\images.js:2:18)
27 at Object.<anonymous> (C:\Users\Lucas\Documents\repos\nexus-materiales\gulpfile.js:4:16)
28 at async Promise.all (index 0) {
29 code: 'ERR_REQUIRE_ESM'
30}
31const { dest, series, src } = require('gulp');
32let imagemin;
33
34const images = series(
35 async () => {
36 imagemin = await import('gulp-imagemin');
37 },
38 () => src('./src/images/**/*')
39 .pipe(
40 imagemin.default(
41 [
42 imagemin.mozjpeg({ quality: 60, progressive: true }),
43 imagemin.optipng({ optimizationLevel: 5, interlaced: null })
44 ],
45 {
46 silent: true
47 }
48 )
49 )
50 .pipe(dest('./dist/images'))
51);
52Note that I used imagemin.default to access the default export of gulp-imagemin, since it's being imported dynamically.
QUESTION
Why would tee fail to write to stdout?
Asked 2022-Feb-08 at 20:40I typically use tee to receive a piped output data, echo it to standard output, and forward it to the actual intended recipient of the piped data. But sometimes this fails, and I cannot exactly understand why.
I'll try to demonstrate with a series of examples:
1$ echo testing with this string | tee
2testing with this string
3So, just echoing some data to tee without arguments, is replicated/printed on the terminal/stdout. Note that this should be tee printing the output, as the output from echo is now "piped"/redirected, and therefore not present in stdout anymore (the same that happens here:
1$ echo testing with this string | tee
2testing with this string
3$ echo aa | echo bb
4bb
5... i.e. echo aa output got redirected to the next command, - which, being echo b, does not care about the input, and outputs just its own output.)
1$ echo testing with this string | tee
2testing with this string
3$ echo aa | echo bb
4bb
5$ echo testing with this string | tee | python3 -c 'a=1'
6$
7Now here, piping data into tee without arguments, - and then piping, from tee, to a program that does not provide any output to terminal/stdout - prints nothing. I would have expected tee here to duplicate to stdout, and then forward to the next command in the pipeline, but apparently that does not happen.
1$ echo testing with this string | tee
2testing with this string
3$ echo aa | echo bb
4bb
5$ echo testing with this string | tee | python3 -c 'a=1'
6$
7$ echo testing with this string | tee /dev/stdout
8testing with this string
9testing with this string
10Right, so if we pipe to tee with command line argument /dev/stdout, we get the printout twice - and as concluded earlier, it must be tee that produces both printed lines. That means, that when used without an argument, |tee basically does not open any file for duplicating, and simply forwards what it receives on its input, to its output; but as it is the last in the pipeline, its output is stdout in that case, so we get a single printout.
Here we get double printout, because
teeduplicated its input stream to/dev/stdoutdue to the argument (which ends up as the first printout); and then- forwarded the same input to its output, which here being stdout (as
teeis again last in the pipeline), results with the second printout.
This also would explain why the previous ...| tee | python3 -c 'a=1' did not print anything: tee without arguments did not open any file for duplication, and merely forwarded to next command in the toolchain - and as the next one does not print any output either, no output is generated whatsoever.
Well, if the above understanding is correct, then this:
1$ echo testing with this string | tee
2testing with this string
3$ echo aa | echo bb
4bb
5$ echo testing with this string | tee | python3 -c 'a=1'
6$
7$ echo testing with this string | tee /dev/stdout
8testing with this string
9testing with this string
10$ echo testing with this string | tee /dev/stdout | python3 -c 'a=1'
11$
12... should print at least one line (from tee copying to /dev/stdout; the "forwarded" part will end up being "gulped" by the final command as it prints nothing), but it does not.
So, why does this happen - where am I going wrong in my understanding of what tee does?
And how can I use tee, to print to stdout, also when its output is forwarded to a command that doesn't print anything to stdout on its own?
ANSWER
Answered 2022-Feb-08 at 20:39You aren't misunderstanding tee, you're misunderstanding what stdout is. In a pipe, like echo testing | tee | python3 -c 'a=1', the tee command's stdout is not the terminal, it's the pipe going to the python command (and the echo command's stdout is the pipe going to tee).
So tee /dev/stdout sends two copies of its input (on stdin) to the exact same place: its stdout, whether that's the terminal, or a pipe, or whatever.
If you want to send a copy of the input to tee someplace other than down the pipe, you need to send it somewhere other than stdout. Where that is depends on where you actually want to send it (i.e. why you want to copy it). If you specifically want to send it to the terminal, you could do this:
1$ echo testing with this string | tee
2testing with this string
3$ echo aa | echo bb
4bb
5$ echo testing with this string | tee | python3 -c 'a=1'
6$
7$ echo testing with this string | tee /dev/stdout
8testing with this string
9testing with this string
10$ echo testing with this string | tee /dev/stdout | python3 -c 'a=1'
11$
12echo testing | tee /dev/tty | python3 -c 'a=1'
13...while if you want to send it to the outer context's stdout (which might or might not be a terminal), you can duplicate the outer context's stdin to a different file descriptor (#3 is handy for this), and then have tee write a copy to that:
1$ echo testing with this string | tee
2testing with this string
3$ echo aa | echo bb
4bb
5$ echo testing with this string | tee | python3 -c 'a=1'
6$
7$ echo testing with this string | tee /dev/stdout
8testing with this string
9testing with this string
10$ echo testing with this string | tee /dev/stdout | python3 -c 'a=1'
11$
12echo testing | tee /dev/tty | python3 -c 'a=1'
13{ echo testing | tee /dev/fd/3 | python3 -c 'a=1'; } 3>&1
14Yet another option is to redirect it to stderr (aka FD #2, which is also the terminal by default, but redirectable separately from stdout) with tee /dev/fd/2.
Note that the various /dev entries I'm using here are supported by most unixish OSes, but they aren't universal. Check to see what your specific OS provides.
QUESTION
How can I use template literals in an .env file?
Asked 2022-Feb-02 at 23:31I want to use JavaScript's Template Literals in an .env file.
Specifically, I am trying to store a JWT public key in the .env file:
1PUBLIC_KEY=
2`--BEGIN PUBLIC--
3AAAAAA
4BBBBBB
5CCCCCC
6--END PUBLIC--`
7But when I try to pull it out using process.env.PUBLIC_KEY JS returns an empty string.
I am using gulp to translate TypeScript but the .env is in the root directory and is required at the start of the gulpfile.
ANSWER
Answered 2021-Sep-17 at 08:57I found a bit of a workaround:
You can use \n to define the line breaks
So it looks like:
1PUBLIC_KEY=
2`--BEGIN PUBLIC--
3AAAAAA
4BBBBBB
5CCCCCC
6--END PUBLIC--`
7PUBLIC_KEY="AAA\nBBB\nCCC"
8Tested it and its working
QUESTION
Angular build - Unmatched selector: %
Asked 2022-Jan-22 at 10:11When I run npm run build which executes ng build -c production build will be completed as expected. But command prompt will be filled with this warning:
1Warning: 303 rules skipped due to selector errors:
2 0% -> Unmatched selector: %
3 20% -> Unmatched selector: %
4 53% -> Unmatched selector: %
5 40% -> Unmatched selector: %
6 43% -> Unmatched selector: %
7 70% -> Unmatched selector: %
8 80% -> Unmatched selector: %
9 90% -> Unmatched selector: %
10...
11How to solve this warning?
package.json:
1Warning: 303 rules skipped due to selector errors:
2 0% -> Unmatched selector: %
3 20% -> Unmatched selector: %
4 53% -> Unmatched selector: %
5 40% -> Unmatched selector: %
6 43% -> Unmatched selector: %
7 70% -> Unmatched selector: %
8 80% -> Unmatched selector: %
9 90% -> Unmatched selector: %
10...
11{
12 "name": "wepod-clients",
13 "version": "3.2.3",
14 "scripts": {
15 "ng": "ng",
16 "start": "node patch.js && ng serve",
17 "serve-auth": "ng run wepod-app:serve-auth-standalone:production",
18 "build": "node patch.js && node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng run wepod-app:app-shell:production && ng run wepod-app:auth-standalone:production",
19 "server": "npm run build && http-server -p 9090 -c-1 dist",
20 "test": "ng test",
21 "lint": "ng lint --fix",
22 "e2e": "ng e2e",
23 "postinstall": "node patch.js && ngcc",
24 "postbuild": "node post-build.js",
25 "prepare": "husky install",
26 "build-latest": "git pull origin production && npm run build"
27 },
28 "private": true,
29 "dependencies": {
30 "@angular/animations": "^13.0.0",
31 "@angular/cdk": "^13.0.0",
32 "@angular/cli": "^13.0.1",
33 "@angular/common": "^13.0.0",
34 "@angular/compiler": "^13.0.0",
35 "@angular/core": "^13.0.0",
36 "@angular/forms": "^13.0.0",
37 "@angular/localize": "^13.0.0",
38 "@angular/platform-browser": "^13.0.0",
39 "@angular/platform-browser-dynamic": "^13.0.0",
40 "@angular/platform-server": "^13.0.0",
41 "@angular/router": "^13.0.0",
42 "@angular/service-worker": "^13.0.0",
43 "@types/video.js": "^7.3.27",
44 "animate.css": "^4.1.1",
45 "assert": "^2.0.0",
46 "bowser": "^2.11.0",
47 "buffer": "^6.0.3",
48 "bundle-loader": "^0.5.6",
49 "compare-version": "^0.1.2",
50 "constants-browserify": "^1.0.0",
51 "crypto-browserify": "^3.12.0",
52 "crypto-js": "^4.1.1",
53 "d3": "^6.5.0",
54 "hammerjs": "^2.0.8",
55 "https-browserify": "^1.0.0",
56 "jalali-moment": "^3.3.10",
57 "lottie-web": "^5.7.13",
58 "lzutf8": "^0.6.0",
59 "net": "^1.0.2",
60 "ng-gallery": "^5.1.1",
61 "ng2-jalali-date-picker": "^2.4.2",
62 "ngx-device-detector": "^1.5.2",
63 "ngx-doughnut-chart": "0.0.4",
64 "ngx-infinite-scroll": "^8.0.2",
65 "ngx-lottie": "^7.0.4",
66 "ngx-owl-carousel-o": "^3.1.1",
67 "ngx-skeleton-loader": "^2.10.1",
68 "ngx-toastr": "^12.1.0",
69 "os-browserify": "^0.3.0",
70 "podchat-browser": "^10.14.13",
71 "rxjs": "^6.6.7",
72 "stream-browserify": "^3.0.0",
73 "stream-http": "^3.2.0",
74 "tls": "0.0.1",
75 "ts-ebml": "^2.0.2",
76 "tslib": "^2.0.0",
77 "uuid": "^8.3.2",
78 "video.js": "^7.15.4",
79 "videojs-record": "^4.5.0",
80 "zone.js": "~0.11.4"
81 },
82 "devDependencies": {
83 "@angular-devkit/build-angular": "^13.0.1",
84 "@angular-devkit/core": "^13.0.1",
85 "@angular/compiler-cli": "^13.0.0",
86 "@angular/language-service": "^13.0.0",
87 "@egjs/hammerjs": "^2.0.17",
88 "@types/hammerjs": "^2.0.40",
89 "@types/jasmine": "~3.6.0",
90 "@types/jasminewd2": "^2.0.10",
91 "@types/node": "^12.20.36",
92 "codelyzer": "^6.0.0",
93 "colors": "^1.4.0",
94 "git-tag-version": "^1.3.1",
95 "gulp": "^4.0.2",
96 "gulp-gzip": "^1.4.2",
97 "http-server": "^14.0.0",
98 "husky": "^7.0.4",
99 "jasmine-core": "~3.6.0",
100 "jasmine-spec-reporter": "~5.0.0",
101 "karma": "^6.3.7",
102 "karma-chrome-launcher": "~3.1.0",
103 "karma-coverage-istanbul-reporter": "^2.1.0",
104 "karma-jasmine": "~4.0.0",
105 "karma-jasmine-html-reporter": "^1.5.0",
106 "protractor": "^7.0.0",
107 "ts-node": "^8.10.2",
108 "tslint": "^6.1.3",
109 "typescript": "4.4.4",
110 "zip-dir": "^2.0.0"
111 },
112 "browser": {
113 "fs": false,
114 "path": false,
115 "os": false
116 }
117}
118ANSWER
Answered 2021-Dec-01 at 14:18can you try to put the following into your ".browserlistrc" file. The file is located in the root directory of your project.
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
IE 11
This once helped me to fix the error.
QUESTION
Liferay Theme Creation : Error During gulp build and gulp deploy
Asked 2022-Jan-21 at 09:29After installing all the necessary packages, I am trying to build a theme for Liferay 7.3 version. I have installed all the packages needed such as nodejs, npm, gulp ad ruby (sass and compass).
After executing gulp build, I am getting the following error :
1Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
2
3Recommendation: math.div($spacer, 2)
4
5 ╷
6306 │ $headings-margin-bottom: $spacer / 2 !default;
7 │ ^^^^^^^^^^^
8 ╵
9 build/_css/clay/bootstrap/_variables.scss 306:31 @import
10 build/_css/clay/base.scss 10:9 @import
11 build/_css/clay.scss 1:9 root stylesheet
12
13Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
14
15Recommendation: math.div($input-padding-y, 2)
16
17
18 ╷
19501 │ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
20 │ ^^^^^^^^^^^^^^^^^^^^
21 ╵
22 build/_css/clay/bootstrap/_variables.scss 501:73 @import
23 build/_css/clay/base.scss 10:9 @import
24 build/_css/clay.scss 1:9 root stylesheet
25
26Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
27
28Recommendation: math.div($custom-control-indicator-size, 2)
29
30
31 ╷
32571 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
33 │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
34 ╵
35 build/_css/clay/bootstrap/_variables.scss 571:49 @import
36 build/_css/clay/base.scss 10:9 @import
37 build/_css/clay.scss 1:9 root stylesheet
38
39Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
40
41Recommendation: math.div($spacer, 2)
42
43
44 ╷
45717 │ $nav-divider-margin-y: $spacer / 2 !default;
46 │ ^^^^^^^^^^^
47 ╵
48 build/_css/clay/bootstrap/_variables.scss 717:37 @import
49 build/_css/clay/base.scss 10:9 @import
50 build/_css/clay.scss 1:9 root stylesheet
51
52Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
53
54Recommendation: math.div($spacer, 2)
55
56
57 ╷
58722 │ $navbar-padding-y: $spacer / 2 !default;
59 │ ^^^^^^^^^^^
60 ╵
61 build/_css/clay/bootstrap/_variables.scss 722:37 @import
62 build/_css/clay/base.scss 10:9 @import
63 build/_css/clay.scss 1:9 root stylesheet
64
65[10:56:46] 'build:compile-css' errored after 13 s
66[10:56:46] Error in plugin "sass"
67Message:
68 build/_css/compat/components/_dropdowns.scss
69Error: compound selectors may no longer be extended.
70Consider `@extend .dropdown-item, .disabled` instead.
71
72 ╷
7334 │ @extend .dropdown-item.disabled;
74 │ ^^^^^^^^^^^^^^^^^^^^^^^
75 ╵
76 build/_css/compat/components/_dropdowns.scss 34:11 root stylesheet
77Details:
78 formatted: Error: compound selectors may no longer be extended.
79Consider `@extend .dropdown-item, .disabled` instead.
80
81 ╷
8234 │ @extend .dropdown-item.disabled;
83 │ ^^^^^^^^^^^^^^^^^^^^^^^
84 ╵
85 build/_css/compat/components/_dropdowns.scss 34:11 root stylesheet
86 line: 34
87 column: 11
88 file: /home/osboxes/liferayExercise/my-liferay-theme/build/_css/compat/components/_dropdowns.scss
89 status: 1
90 messageFormatted: build/_css/compat/components/_dropdowns.scss
91Error: compound selectors may no longer be extended.
92Consider `@extend .dropdown-item, .disabled` instead.
93
94 ╷
9534 │ @extend .dropdown-item.disabled;
96 │ ^^^^^^^^^^^^^^^^^^^^^^^
97 ╵
98 build/_css/compat/components/_dropdowns.scss 34:11 root stylesheet
99 messageOriginal: compound selectors may no longer be extended.
100Consider `@extend .dropdown-item, .disabled` instead.
101
102 ╷
10334 │ @extend .dropdown-item.disabled;
104 │ ^^^^^^^^^^^^^^^^^^^^^^^
105 ╵
106 **build/_css/compat/components/_dropdowns.scss 34:11 root stylesheet
107 relativePath: build/_css/compat/components/_dropdowns.scss
108 domainEmitter: [object Object]
109 domainThrown: false**
110
111[10:56:46] 'build' errored after 19 s
112Packages version are :
Node : 12.22.7
Npm : 6.14.15
Gulp :CLI version: 2.3.0 ,Local version: 4.0.0
NOTE: I cannot edit these files as they are automatically generated. So i cannot change those .
ANSWER
Answered 2021-Dec-17 at 11:20I have the same issue but you can work around by overriding the file:
- Go into your
srcfolder - If you don't have create css folder
- Then create
/compat/components/_dropdown.scss - Now here you can override the file
- Run build command and you're done!
QUESTION
Bootstrap modal being rendered inside side bar
Asked 2022-Jan-20 at 18:53I'm losing my head over this modal which keeps showing up inside my side div area, I haven't found anything about it on the bootstrp5 documentation nor on any online forums.
I just need it to render centered on the page, and the fade effect to affect all background, as per the bootstrap documentation (https://getbootstrap.com/docs/5.0/components/modal/). But I haven't found any way to make it work...
I'm using bootstrap 5 (custom.css) with the following frontend code:
HTML:
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8
9 <link href="./css/custom.css" rel="stylesheet">
10 <link href="./css/navlayout.css" rel="stylesheet">
11 <link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet">
12
13 <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
14 <script defer src="./js/navlayout.js"></script>
15 <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
16
17 <link rel="icon" href="./img/icon.png" />
18
19 <title>Basic - Bootstrap 5 with Gulp 4</title>
20</head>
21
22<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover;">
23 <header class="top-header align-middle">
24 <div class="mx-auto"></div>
25 </header>
26 <header class="header" id="header">
27 <div class="header_toggle" id="toggle-up"> <i class="fas fa-bars secondary-bs-color" id="header-toggle"></i></div>
28
29 <div class="me-5">
30 <a class=" white-bs-colorbtn btn-secondary-outline me-4" href="#" role="button" style="color: white; font-weight: bold;">Login</a>
31 <a class="white-bs-color btn btn-secondary" href="#" role="button" style="color: white; font-weight: bold">Register</a>
32 </div>
33 </header>
34 <div class="l-navbar" id="nav-bar">
35 <nav class="nav">
36 <div>
37 <div class="nav_list">
38 <!-- <a href="#" class="nav_logo"> <img src="./img/Logo Vegaz Bet MOEDA.png" width="30px" alt="" /> <span class="nav_logo-name"><img src="./img/Logo Vegaz Bet ESCRITA.png" width="100px" alt=""/></span> </a> -->
39 <a href="#" class="nav_link active"> <i class="fas fa-chart-line nav_icon secondary-bs-color"></i> <span class="nav_name">Crash</span> </a>
40 <a href="#" class="nav_link"> <i class="far fa-life-ring nav_icon secondary-bs-color"></i> <span class="nav_name">Roullete</span> </a>
41 <a href="#" class="nav_link"> <i class="fas fa-dice nav_icon secondary-bs-color"></i> <span class="nav_name">Dice</span> </a>
42 <a href="#" class="nav_link"> <i class="fas fa-coins nav_icon secondary-bs-color"></i> <span class="nav_name">Heads or Tails</span> </a>
43 <hr class="bg-white border-2 border-top border-white">
44 <a href="#" class="nav_link"> <i class="fas fa-hand-holding-usd nav_icon secondary-bs-color"></i> <span class="nav_name">Deposit /<br> Withdrawal</span> </a>
45 <a href="#" class="nav_link"> <i class="far fa-question-circle nav_icon secondary-bs-color"></i> <span class="nav_name">Help</span> </a>
46 </div>
47 </div>
48
49 </nav>
50 </div>
51 <!--Container Main start-->
52 <div class="height-100">
53 <h4>Main Components</h4>
54 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
55 Launch static backdrop modal
56 </button>
57 <!-- Login modal -->
58 <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
59 <div class="modal-dialog">
60 <div class="modal-content">
61 <div class="modal-header">
62 <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
63 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
64 </div>
65 <div class="modal-body">
66 ...
67 </div>
68 <div class="modal-footer">
69 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
70 <button type="button" class="btn btn-primary">Understood</button>
71 </div>
72 </div>
73 </div>
74 </div>
75
76 <!-- Registration modal -->
77 </div>
78 <!--Container Main end-->
79
80</body>
81
82</html>
83Navlayout CSS:
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8
9 <link href="./css/custom.css" rel="stylesheet">
10 <link href="./css/navlayout.css" rel="stylesheet">
11 <link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet">
12
13 <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
14 <script defer src="./js/navlayout.js"></script>
15 <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
16
17 <link rel="icon" href="./img/icon.png" />
18
19 <title>Basic - Bootstrap 5 with Gulp 4</title>
20</head>
21
22<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover;">
23 <header class="top-header align-middle">
24 <div class="mx-auto"></div>
25 </header>
26 <header class="header" id="header">
27 <div class="header_toggle" id="toggle-up"> <i class="fas fa-bars secondary-bs-color" id="header-toggle"></i></div>
28
29 <div class="me-5">
30 <a class=" white-bs-colorbtn btn-secondary-outline me-4" href="#" role="button" style="color: white; font-weight: bold;">Login</a>
31 <a class="white-bs-color btn btn-secondary" href="#" role="button" style="color: white; font-weight: bold">Register</a>
32 </div>
33 </header>
34 <div class="l-navbar" id="nav-bar">
35 <nav class="nav">
36 <div>
37 <div class="nav_list">
38 <!-- <a href="#" class="nav_logo"> <img src="./img/Logo Vegaz Bet MOEDA.png" width="30px" alt="" /> <span class="nav_logo-name"><img src="./img/Logo Vegaz Bet ESCRITA.png" width="100px" alt=""/></span> </a> -->
39 <a href="#" class="nav_link active"> <i class="fas fa-chart-line nav_icon secondary-bs-color"></i> <span class="nav_name">Crash</span> </a>
40 <a href="#" class="nav_link"> <i class="far fa-life-ring nav_icon secondary-bs-color"></i> <span class="nav_name">Roullete</span> </a>
41 <a href="#" class="nav_link"> <i class="fas fa-dice nav_icon secondary-bs-color"></i> <span class="nav_name">Dice</span> </a>
42 <a href="#" class="nav_link"> <i class="fas fa-coins nav_icon secondary-bs-color"></i> <span class="nav_name">Heads or Tails</span> </a>
43 <hr class="bg-white border-2 border-top border-white">
44 <a href="#" class="nav_link"> <i class="fas fa-hand-holding-usd nav_icon secondary-bs-color"></i> <span class="nav_name">Deposit /<br> Withdrawal</span> </a>
45 <a href="#" class="nav_link"> <i class="far fa-question-circle nav_icon secondary-bs-color"></i> <span class="nav_name">Help</span> </a>
46 </div>
47 </div>
48
49 </nav>
50 </div>
51 <!--Container Main start-->
52 <div class="height-100">
53 <h4>Main Components</h4>
54 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
55 Launch static backdrop modal
56 </button>
57 <!-- Login modal -->
58 <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
59 <div class="modal-dialog">
60 <div class="modal-content">
61 <div class="modal-header">
62 <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
63 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
64 </div>
65 <div class="modal-body">
66 ...
67 </div>
68 <div class="modal-footer">
69 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
70 <button type="button" class="btn btn-primary">Understood</button>
71 </div>
72 </div>
73 </div>
74 </div>
75
76 <!-- Registration modal -->
77 </div>
78 <!--Container Main end-->
79
80</body>
81
82</html>
83@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
84:root {
85 --top-header-top-position: 5%;
86 --header-height: 3rem;
87 --nav-width: 68px;
88 --primary-color: var(--bs-primary);
89 --secondary-color: var(--bs-secondary);
90 --white-color: #FFFFFF;
91 --body-font: 'Montserrat', sans-serif;
92 --normal-font-size: 1rem;
93 --z-fixed: 100;
94 --z-topbar: 101;
95}
96
97*,
98::before,
99::after {
100 box-sizing: border-box
101}
102
103body {
104 position: relative;
105 margin: var(--header-height) 0 0 0;
106 padding: 0 1rem;
107 font-family: var(--body-font);
108 font-size: var(--normal-font-size);
109 transition: .5s;
110 -webkit-background-size: cover;
111 -moz-background-size: cover;
112 background-size: cover;
113 -o-background-size: cover;
114}
115
116a {
117 text-decoration: none
118}
119
120.top-header {
121 width: 100%;
122 height: var(--top-header-top-position);
123 position: fixed;
124 top: 0;
125 left: 0;
126 display: flex;
127 align-items: center;
128 justify-content: space-between;
129 padding: 0 1rem;
130 background-color: var(--secondary-color);
131 z-index: var(--z-topbar);
132 transition: .5s;
133 text-align: center !important;
134}
135
136.header {
137 width: 100%;
138 height: var(--header-height);
139 position: fixed;
140 top: var(--top-header-top-position);
141 left: 0;
142 display: flex;
143 align-items: center;
144 justify-content: space-between;
145 padding: 0 1rem;
146 background-color: var(--primary-color);
147 z-index: var(--z-fixed);
148 transition: .5s
149}
150
151.header_toggle {
152 color: var(--primary-color);
153 font-size: 1.5rem;
154 cursor: pointer
155}
156
157.header_img {
158 width: 35px;
159 height: 35px;
160 display: flex;
161 justify-content: center;
162 border-radius: 50%;
163 overflow: hidden
164}
165
166.header_img img {
167 width: 40px
168}
169
170.l-navbar {
171 position: fixed;
172 top: 0;
173 left: -30%;
174 width: var(--nav-width);
175 height: 100vh;
176 background-color: var(--primary-color);
177 padding: .5rem 1rem 0 0;
178 transition: .5s;
179 z-index: var(--z-fixed)
180}
181
182.nav {
183 height: 100%;
184 display: flex;
185 flex-direction: column;
186 justify-content: space-between;
187 overflow: hidden;
188 margin-top: 5rem;
189}
190
191.nav_logo,
192.nav_link {
193 display: grid;
194 grid-template-columns: max-content max-content;
195 align-items: center;
196 column-gap: 1rem;
197 padding: .5rem 0 .5rem 1.5rem
198}
199
200.nav_logo {
201 margin-bottom: 2rem
202}
203
204.nav_logo-icon {
205 font-size: 1.25rem;
206 color: var(--white-color)
207}
208
209.nav_logo-name {
210 color: var(--white-color);
211 font-weight: 700
212}
213
214.nav_link {
215 position: relative;
216 color: var(--white-color);
217 margin-bottom: 1.5rem;
218 transition: .3s
219}
220
221.nav_link:hover {
222 color: var(--white-color)
223}
224
225.nav_icon {
226 font-size: 1.25rem;
227}
228
229.secondary-bs-color {
230 color: var(--bs-secondary)
231}
232
233.white-bs-color {
234 color: var(--white-colo)
235}
236
237.show {
238 left: 0
239}
240
241.body-pd {
242 padding-left: calc(var(--nav-width) + 1rem)
243}
244
245.active {
246 color: var(--white-color)
247}
248
249.active::before {
250 content: '';
251 position: absolute;
252 left: 0;
253 width: 2px;
254 height: 32px;
255 background-color: var(--white-color)
256}
257
258.height-100 {
259 height: 100vh
260}
261
262@media screen and (min-width: 768px) {
263 body {
264 margin: calc(var(--header-height) + 1rem) 0 0 0;
265 padding-left: calc(var(--nav-width) + 2rem)
266 }
267 .header {
268 height: calc(var(--header-height) + 1rem);
269 padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
270 }
271 .header_img {
272 width: 40px;
273 height: 40px
274 }
275 .header_img img {
276 width: 45px
277 }
278 .l-navbar {
279 left: 0;
280 padding: 1rem 1rem 0 0
281 }
282 .show {
283 width: calc(var(--nav-width) + 156px)
284 }
285 .body-pd {
286 padding-left: calc(var(--nav-width) + 188px)
287 }
288}
289JS:
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8
9 <link href="./css/custom.css" rel="stylesheet">
10 <link href="./css/navlayout.css" rel="stylesheet">
11 <link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet">
12
13 <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
14 <script defer src="./js/navlayout.js"></script>
15 <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
16
17 <link rel="icon" href="./img/icon.png" />
18
19 <title>Basic - Bootstrap 5 with Gulp 4</title>
20</head>
21
22<body id="body-pd" style="background: url('./img/Home e Roleta.png') no-repeat center center fixed; background-size: cover;">
23 <header class="top-header align-middle">
24 <div class="mx-auto"></div>
25 </header>
26 <header class="header" id="header">
27 <div class="header_toggle" id="toggle-up"> <i class="fas fa-bars secondary-bs-color" id="header-toggle"></i></div>
28
29 <div class="me-5">
30 <a class=" white-bs-colorbtn btn-secondary-outline me-4" href="#" role="button" style="color: white; font-weight: bold;">Login</a>
31 <a class="white-bs-color btn btn-secondary" href="#" role="button" style="color: white; font-weight: bold">Register</a>
32 </div>
33 </header>
34 <div class="l-navbar" id="nav-bar">
35 <nav class="nav">
36 <div>
37 <div class="nav_list">
38 <!-- <a href="#" class="nav_logo"> <img src="./img/Logo Vegaz Bet MOEDA.png" width="30px" alt="" /> <span class="nav_logo-name"><img src="./img/Logo Vegaz Bet ESCRITA.png" width="100px" alt=""/></span> </a> -->
39 <a href="#" class="nav_link active"> <i class="fas fa-chart-line nav_icon secondary-bs-color"></i> <span class="nav_name">Crash</span> </a>
40 <a href="#" class="nav_link"> <i class="far fa-life-ring nav_icon secondary-bs-color"></i> <span class="nav_name">Roullete</span> </a>
41 <a href="#" class="nav_link"> <i class="fas fa-dice nav_icon secondary-bs-color"></i> <span class="nav_name">Dice</span> </a>
42 <a href="#" class="nav_link"> <i class="fas fa-coins nav_icon secondary-bs-color"></i> <span class="nav_name">Heads or Tails</span> </a>
43 <hr class="bg-white border-2 border-top border-white">
44 <a href="#" class="nav_link"> <i class="fas fa-hand-holding-usd nav_icon secondary-bs-color"></i> <span class="nav_name">Deposit /<br> Withdrawal</span> </a>
45 <a href="#" class="nav_link"> <i class="far fa-question-circle nav_icon secondary-bs-color"></i> <span class="nav_name">Help</span> </a>
46 </div>
47 </div>
48
49 </nav>
50 </div>
51 <!--Container Main start-->
52 <div class="height-100">
53 <h4>Main Components</h4>
54 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
55 Launch static backdrop modal
56 </button>
57 <!-- Login modal -->
58 <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
59 <div class="modal-dialog">
60 <div class="modal-content">
61 <div class="modal-header">
62 <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
63 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
64 </div>
65 <div class="modal-body">
66 ...
67 </div>
68 <div class="modal-footer">
69 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
70 <button type="button" class="btn btn-primary">Understood</button>
71 </div>
72 </div>
73 </div>
74 </div>
75
76 <!-- Registration modal -->
77 </div>
78 <!--Container Main end-->
79
80</body>
81
82</html>
83@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
84:root {
85 --top-header-top-position: 5%;
86 --header-height: 3rem;
87 --nav-width: 68px;
88 --primary-color: var(--bs-primary);
89 --secondary-color: var(--bs-secondary);
90 --white-color: #FFFFFF;
91 --body-font: 'Montserrat', sans-serif;
92 --normal-font-size: 1rem;
93 --z-fixed: 100;
94 --z-topbar: 101;
95}
96
97*,
98::before,
99::after {
100 box-sizing: border-box
101}
102
103body {
104 position: relative;
105 margin: var(--header-height) 0 0 0;
106 padding: 0 1rem;
107 font-family: var(--body-font);
108 font-size: var(--normal-font-size);
109 transition: .5s;
110 -webkit-background-size: cover;
111 -moz-background-size: cover;
112 background-size: cover;
113 -o-background-size: cover;
114}
115
116a {
117 text-decoration: none
118}
119
120.top-header {
121 width: 100%;
122 height: var(--top-header-top-position);
123 position: fixed;
124 top: 0;
125 left: 0;
126 display: flex;
127 align-items: center;
128 justify-content: space-between;
129 padding: 0 1rem;
130 background-color: var(--secondary-color);
131 z-index: var(--z-topbar);
132 transition: .5s;
133 text-align: center !important;
134}
135
136.header {
137 width: 100%;
138 height: var(--header-height);
139 position: fixed;
140 top: var(--top-header-top-position);
141 left: 0;
142 display: flex;
143 align-items: center;
144 justify-content: space-between;
145 padding: 0 1rem;
146 background-color: var(--primary-color);
147 z-index: var(--z-fixed);
148 transition: .5s
149}
150
151.header_toggle {
152 color: var(--primary-color);
153 font-size: 1.5rem;
154 cursor: pointer
155}
156
157.header_img {
158 width: 35px;
159 height: 35px;
160 display: flex;
161 justify-content: center;
162 border-radius: 50%;
163 overflow: hidden
164}
165
166.header_img img {
167 width: 40px
168}
169
170.l-navbar {
171 position: fixed;
172 top: 0;
173 left: -30%;
174 width: var(--nav-width);
175 height: 100vh;
176 background-color: var(--primary-color);
177 padding: .5rem 1rem 0 0;
178 transition: .5s;
179 z-index: var(--z-fixed)
180}
181
182.nav {
183 height: 100%;
184 display: flex;
185 flex-direction: column;
186 justify-content: space-between;
187 overflow: hidden;
188 margin-top: 5rem;
189}
190
191.nav_logo,
192.nav_link {
193 display: grid;
194 grid-template-columns: max-content max-content;
195 align-items: center;
196 column-gap: 1rem;
197 padding: .5rem 0 .5rem 1.5rem
198}
199
200.nav_logo {
201 margin-bottom: 2rem
202}
203
204.nav_logo-icon {
205 font-size: 1.25rem;
206 color: var(--white-color)
207}
208
209.nav_logo-name {
210 color: var(--white-color);
211 font-weight: 700
212}
213
214.nav_link {
215 position: relative;
216 color: var(--white-color);
217 margin-bottom: 1.5rem;
218 transition: .3s
219}
220
221.nav_link:hover {
222 color: var(--white-color)
223}
224
225.nav_icon {
226 font-size: 1.25rem;
227}
228
229.secondary-bs-color {
230 color: var(--bs-secondary)
231}
232
233.white-bs-color {
234 color: var(--white-colo)
235}
236
237.show {
238 left: 0
239}
240
241.body-pd {
242 padding-left: calc(var(--nav-width) + 1rem)
243}
244
245.active {
246 color: var(--white-color)
247}
248
249.active::before {
250 content: '';
251 position: absolute;
252 left: 0;
253 width: 2px;
254 height: 32px;
255 background-color: var(--white-color)
256}
257
258.height-100 {
259 height: 100vh
260}
261
262@media screen and (min-width: 768px) {
263 body {
264 margin: calc(var(--header-height) + 1rem) 0 0 0;
265 padding-left: calc(var(--nav-width) + 2rem)
266 }
267 .header {
268 height: calc(var(--header-height) + 1rem);
269 padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
270 }
271 .header_img {
272 width: 40px;
273 height: 40px
274 }
275 .header_img img {
276 width: 45px
277 }
278 .l-navbar {
279 left: 0;
280 padding: 1rem 1rem 0 0
281 }
282 .show {
283 width: calc(var(--nav-width) + 156px)
284 }
285 .body-pd {
286 padding-left: calc(var(--nav-width) + 188px)
287 }
288}
289document.addEventListener("DOMContentLoaded", function(event) {
290
291 const showNavbar = (toggleId, navId, bodyId, headerId) => {
292 const toggle = document.getElementById(toggleId),
293 nav = document.getElementById(navId),
294 bodypd = document.getElementById(bodyId),
295 headerpd = document.getElementById(headerId),
296 toggleup = document.getElementById("toggle-up")
297
298 console.log(toggle);
299 console.log(nav);
300 console.log(bodypd);
301 console.log(headerpd);
302
303 // Validate that all variables exist
304 if (toggle && nav && bodypd && headerpd) {
305 toggleup.addEventListener('click', () => {
306 // show navbar
307 nav.classList.toggle('show')
308 // change icon
309 toggle.classList.toggle('fa-times')
310 // add padding to body
311 bodypd.classList.toggle('body-pd')
312 // add padding to header
313 headerpd.classList.toggle('body-pd')
314 })
315 console.log("EXECUTED");
316 }
317
318 }
319
320 showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')
321
322 /*===== LINK ACTIVE =====*/
323 const linkColor = document.querySelectorAll('.nav_link')
324
325 function colorLink() {
326 if (linkColor) {
327 linkColor.forEach(l => l.classList.remove('active'))
328 this.classList.add('active')
329 }
330 }
331 linkColor.forEach(l => l.addEventListener('click', colorLink))
332
333 console.log("LOADED");
334
335 //modal load
336 var myModal = document.getElementById('staticBackdrop')
337 var myInput = document.getElementById('myInput')
338
339 myModal.addEventListener('shown.bs.modal', function () {
340 myInput.focus()
341 })
342});
343ANSWER
Answered 2022-Jan-20 at 18:32You add width to the .show in @media screen and (min-width: 768px) section.
And you should not do this. If you want to change the size of the modal you can set width for .modal-dialog class
QUESTION
Building a Liferay theme fails with an error "Cannot find module 'liferay-font-awesome'"
Asked 2022-Jan-14 at 13:33Building a Liferay theme fails with an error Cannot find module 'liferay-font-awesome'. What's wrong and how can I fix the issue?
1$ mkdir liferay-workspace
2$ cd liferay-workspace/
3$ blade init --liferay-version portal-7.4-ga6
4$ blade server init
5$ cd themes/
6$ yo liferay-theme # Would you like to add Font Awesome to your theme? Yes
7$ cd my-liferay-theme/
8$ gulp build
9[18:55:39] Error: Cannot find module 'liferay-font-awesome'
10$ npm i liferay-font-awesome
11$ gulp build
12[18:58:33] Error: Cannot find module 'liferay-font-awesome'
13Version information
1$ mkdir liferay-workspace
2$ cd liferay-workspace/
3$ blade init --liferay-version portal-7.4-ga6
4$ blade server init
5$ cd themes/
6$ yo liferay-theme # Would you like to add Font Awesome to your theme? Yes
7$ cd my-liferay-theme/
8$ gulp build
9[18:55:39] Error: Cannot find module 'liferay-font-awesome'
10$ npm i liferay-font-awesome
11$ gulp build
12[18:58:33] Error: Cannot find module 'liferay-font-awesome'
13$ npm -v
146.14.12
15$ blade version
16blade version 4.0.10.202111191310
17$ gulp -v
18CLI version: 2.3.0
19Local version: 4.0.2
20$ yo --version
214.3.0
22$ java -version
23openjdk version "11.0.13" 2021-10-19
24OpenJDK Runtime Environment (build 11.0.13+8-post-Debian-1deb11u1)
25OpenJDK 64-Bit Server VM (build 11.0.13+8-post-Debian-1deb11u1, mixed mode, sharing)
26ANSWER
Answered 2022-Jan-14 at 13:33I did not use blade but got the same error with first creating a theme skeleton with yo liferay-theme and then running gulp build.
The error seems to relate to liferay-font-awesome version 3.5.0 which is the version Liferay theme generator puts into package.json.
I then changed the liferay-font-awesome version to 3.4.2 in package.json, executed npm install to update node_modules and after this gulp build completed successfully.
I did not test the theme in practise, just got it compiled.
QUESTION
Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)
Asked 2022-Jan-12 at 23:22Getting below error after installed latest node.js (v16.13.1)
Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93) For more information on which environments are supported please see: https://github.com/sass/node-sass/releases/tag/v4.14.1 I have created static pages for my application and use sass and gulp
I have a static pages and using Sass in the page and use gulp to run on the browser.(npm install). Below are the version which worked my application:
- Node.js - 12.18.0
- gulp - "4.0.2"
- "gulp-sass": "4.1.0"
Package.json file
1"scripts": {
2 "start": "gulp watch"
3 },
4"dependencies": {
5 "@fortawesome/fontawesome-free": "5.15.1",
6 "@ttskch/select2-bootstrap4-theme": "^1.5.2",
7 "bootstrap": "4.5.3",
8 "bootstrap-datepicker": "^1.9.0",
9 "jquery": "3.5.1",
10 "jquery.easing": "^1.4.1",
11 "select2": "^4.1.0-rc.0",
12 "gulp": "4.0.2"
13 },
14 "devDependencies": {
15 "browser-sync": "2.26.13",
16 "del": "6.0.0",
17 "gulp": "4.0.2",
18 "gulp-autoprefixer": "7.0.1",
19 "gulp-clean-css": "4.3.0",
20 "gulp-header": "2.0.9",
21 "gulp-plumber": "^1.2.1",
22 "gulp-rename": "2.0.0",
23 "gulp-sass": "4.1.0",
24 "gulp-uglify": "3.0.2",
25 "merge-stream": "2.0.0"
26 }
27Even using command npm rebuild node-sass is not changing anything.
ANSWER
Answered 2022-Jan-12 at 23:22gulp-sass 4.1.0 uses node-sass 4, and node-sass 4 does not support Node.js 16, as indicated in this table.
To support Node.js 16, upgrade gulp-sass: the latest version today is 5.1.0:
1"scripts": {
2 "start": "gulp watch"
3 },
4"dependencies": {
5 "@fortawesome/fontawesome-free": "5.15.1",
6 "@ttskch/select2-bootstrap4-theme": "^1.5.2",
7 "bootstrap": "4.5.3",
8 "bootstrap-datepicker": "^1.9.0",
9 "jquery": "3.5.1",
10 "jquery.easing": "^1.4.1",
11 "select2": "^4.1.0-rc.0",
12 "gulp": "4.0.2"
13 },
14 "devDependencies": {
15 "browser-sync": "2.26.13",
16 "del": "6.0.0",
17 "gulp": "4.0.2",
18 "gulp-autoprefixer": "7.0.1",
19 "gulp-clean-css": "4.3.0",
20 "gulp-header": "2.0.9",
21 "gulp-plumber": "^1.2.1",
22 "gulp-rename": "2.0.0",
23 "gulp-sass": "4.1.0",
24 "gulp-uglify": "3.0.2",
25 "merge-stream": "2.0.0"
26 }
27npm install -D gulp-sass@5.1.0
28This will give you node-sass 7, which supports all current versions of Node.js, including Node.js 16.
Community Discussions contain sources that include Stack Exchange Network
Tutorials and Learning Resources in Gulp
Tutorials and Learning Resources are not available at this moment for Gulp
Share this Page
Get latest updates on Gulp