Cannot find bootstrap package when I tried to compile scss into css files

[krasnabiotech]

Detailed description of the problem

I want to customize the decoration and layout of the web page as I wish. When I tried to modify the scss files in /src directory, and then compiled them into css using 'yarn run watchcss' command, it returned me 'cannot find stylesheet to import' and showed the '@import bootstrap/scss/function' syntax could not be properly executed since the bootstrap package was not found. I noticed that yarn4.0 was used in elabftw, and I'm not familiar with that. A weird thing was that, I could even not find the bootstrap package in the whole elabftw docker container after I used 'yarn install' and had installed the bootstrap. Could anyone give me some suggestions?

Expected Behavior

I hope I can run 'yarn install', and then use 'yarn run watchcss' to compile all the css files.

Steps to reproduce the behavior

1. change to the directory of elabftw in the running docker container;
2. run the command of 'yarn install' to install the dependencies as described in the 'package.json' file;
3. run the command of 'yarn run watchcss' to build css files from the scss files in the elabftw/src/scss directory;
4. then you could find the bug.

Do you have any idea what may have caused this?

No response

Do you have an idea how to solve the issue?

No response

What is your docker-compose configuration?

# docker-elabftw configuration file
# use : "docker-compose up -d" to start containers
# this config file contains all the possible configuration options, shown with default values
# https://hub.docker.com/r/elabftw/elabimg/
# https://www.elabftw.net
version: '2.1'

# our first container is nginx + php-fpm + elabftw
services:
  web:
    # the latest tag points to the latest stable version
    # use the next tag to use alpha/beta version
    # use a specific version to pin the image
    # example: elabftw/elabimg:4.0.5
    # default value: elabftw/elabimg:5.0.4
    image: elabftw/elabimg:5.0.4
    # this ensures the container will be restarted after a reboot of the server
    # default value: always
    restart: always
    # comment this out if you use several containers with redis, as you can't have several containers with the same name
    # default value: elabftw
    container_name: elabftw
    # make sure we wait for mysql to be available before starting
    # comment this out if you're not using a mysql container
    # note: the mysql container needs an healthcheck block for this to work
    depends_on:
      mysql:
        condition: service_healthy

    # limit number of processes
    # this option is commented out because it is not in v3 of compose files, only v2
    # even though it works as expected in a v3 file with recent docker-compose
    #pids_limit: 42

    # add a security flag to prevent a process gaining new privileges
    security_opt:
      - no-new-privileges:true

    # restrict capabilities of the root user to the strict minimum
    # see CIS Docker Benchmark v1.5 5.3
    # see ANSSI-FT-082 23/09/2020 R8
    # WARNING: for Centos7/8, comment out these lines (cap_drop and cap_add)
    # If you get this error in the logs:
    # nginx: [emerg] bind() to 0.0.0.0:443 failed (13: Permission denied)
    # comment out these lines!
    # cap_drop:
    #     - ALL
    # cap_add:
    #     - CHOWN
    #     - SETGID
    #     - SETUID
    #     - FOWNER
    #     - DAC_OVERRIDE

    # environment variables passed to the container to configure options at run time (when container is started)
    # commented variables are optional
    environment:
        #######################
        # MYSQL CONFIGURATION #
        #######################
        # name of the MySQL server (by default "mysql" the name of the mysql container in default elabftw Docker configuration)
        # you can put here the IP address of an existing MySQL server if you already have one running
        # default value: mysql
        - DB_HOST=mysql

        # port on which the MySQL server is listening
        # you probably don't need to modify this value
        # default value: 3306
        - DB_PORT=3306

        # name of the MySQL database
        # you probably don't need to modify this value
        # default value: elabftw
        - DB_NAME=elabftw

        # MySQL user with write access to the previously named database
        # you probably don't need to modify this value
        # default value: elabftw
        - DB_USER=elabftw

        # MySQL password; a random password has been generated for you but feel free to change it if needed
        # default value: generated randomly if you get the config from get.elabftw.net
        - DB_PASSWORD=DpYyg1si1YMEC0CqDNAdU1wnoje6NtD

        # Mysql Cert path: you only need this if you connect to a mysql server with tls
        # Use a volume that points to /mysql-cert in the container
        # optional
        #- DB_CERT_PATH=/mysql-cert/cert.pem

        #####################
        # PHP CONFIGURATION #
        #####################
        # the timezone in which the server is
        # better if changed (see list of available values: http://php.net/manual/en/timezones.php
        - PHP_TIMEZONE=Europe/Paris
        # again
        - TZ=Europe/Paris

        # optional: set the limit of simultaneous request that will be served
        # see http://php.net/manual/en/install.fpm.configuration.php
        # default value: 50
        #- PHP_MAX_CHILDREN=50

        # optional: adjust the max execution time of PHP scripts. Allows for bigger ZIP exports.
        # default value: 120
        #- PHP_MAX_EXECUTION_TIME=120

        # optional: adjust the amount of memory available to PHP, increase it if you run into issues
        # information: 2G of memory available to PHP might seem a lot. But realize this: it's not 2003 anymore. PHP is not just a few "if" and "foreach" in some html page.
        # We use it to generate huge PDF files and archives, to manipulate potentially big images, and do complicated operations on thousands of objects fast.
        # So yeah, the conservative 128 Mb default is obsolete when a simple photo taken with a phone can be 10 Mb.
        # Most of the servers that run eLabFTW will run ONLY eLab and will easily have at least 4 Gb of RAM dedicated to this task.
        # What is the point of having 4 Gb of RAM and let the main application use only a few percents of it...
        # This doesn't mean that eLabFTW will consume that much memory all the time. 99% of the time it will have very low memory footprint.
        # But from time to time, users will export many entries at once in PDF with big images in them and that's when you want to have some headroom!
        # example value: 4G
        # default value: 2G
        #- MAX_PHP_MEMORY=2G

        # optional: set a password to get access to /php-status, which will display various metrics about the php-fpm processes
        # also works for /nginx-status, for metrics about nginx process
        # if this is not set, a random password will be generated but never displayed, effectively disabling access to this endpoint
        # the enpdoint can be accessed with the "elabftw" user, and the password you set below
        # example value: my-cool-password
        # default value: not set
        #- STATUS_PASSWORD=

        #########################
        # ELABFTW CONFIGURATION #
        #########################
        # The secret key is used for encrypting the SMTP and Timestamping passwords
        # A random one has been generated for you, if you wish to change it you can
        # get another secret key from https://get.elabftw.net/?key
        # if you don't want to get it from an external source you can also do that:
        # docker run --rm -t --entrypoint '/bin/sh' elabftw/elabimg -c "php -d memory_limit=10M -d open_basedir='' bin/console tools:genkey"
        # Note: the value MUST be generated as shown in the methods above.
        # default value: generated randomly if you get the config from get.elabftw.net
        - SECRET_KEY=def00000825679644141fb828d271c161b86f6a37e482b73de62c7fb2564d99cdc932149dd85f6da07d7a1d2204990e8e14347b61b747b0715514c04dadd4c9abaed1c46

        # The canonical URL to the website, including port if not standard
        # Use the user-facing URL here.
        # example value: https://elab.uni-delta.fr
        # example value: https://elab.uni-delta.fr:3148
        - SITE_URL=https://localhost

        # optional: adjust maximum size of uploaded files
        # default value: 100M
        #- MAX_UPLOAD_SIZE=100M

        # optional: s3 storage credentials
        #- ELAB_AWS_ACCESS_KEY=
        #- ELAB_AWS_SECRET_KEY=

        #######################
        # NGINX CONFIGURATION #
        #######################
        # change to your server name in nginx config
        # default value: localhost
        # example value: elab.uni.edu
        - SERVER_NAME=localhost

        # optional: disable https, use this to have an http server listening on port 443
        # useful if the SSL stack is handled by haproxy or something alike
        # default value: false
        - DISABLE_HTTPS=false

        # set to true to use letsencrypt or other certificates
        # note: does nothing if DISABLE_HTTPS is set to true
        # default value: false
        - ENABLE_LETSENCRYPT=false

        # optional: enable ipv6 (make sure you have an AAAA dns record!)
        # default value: false
        #- ENABLE_IPV6=false

        # optional: adjust the user/group that will own the uploaded files (and run the webserver)
        # useful if your files are stored on an NFS mount point where the files ownership are imposed by the NFS server
        # default value: nginx
        # example value: nobody
        #- ELABFTW_USER=nginx
        # default value: nginx
        # example value: nobody
        #- ELABFTW_GROUP=nginx
        # default value: 101
        # example value: 65534
        #- ELABFTW_USERID=101
        # default value: 101
        # example value: 65534
        #- ELABFTW_GROUPID=101

        # optional: enable if you want nginx to be configured with set_real_ip_from directives
        # default value: false
        #- SET_REAL_IP=false
        # the IP address/addresses. Separate them with a , AND A SPACE. Several set_real_ip_from lines will be added to the nginx config. One for each.
        # this does nothing if SET_REAL_IP is set to false
        #- SET_REAL_IP_FROM=192.168.31.48, 192.168.0.42, 10.10.13.37

        # optional: adjust the number of worker processes nginx will spawn
        # default value: auto
        # if auto doesn't work for you, use the number of cores available on the server (or less)
        #- NGINX_WORK_PROC=auto

        # optional: allow javascript code to call the API from an external service
        # this will add a response header Access-Control-Allow-Origin with content of the env var as value
        # mdn doc: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
        # default: header not set (empty value)
        # example value: app.example.org
        # example value: *
        #- ALLOW_ORIGIN=

        # optional: define methods allowed to javascript code calling the API from an external service
        # this will add a response header Access-Control-Allow-Methods with content of the env var as value
        # mdn doc: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods
        # default: header not set (empty value)
        # example value: GET, POST, PATCH
        #- ALLOW_METHODS=

        # optional: define headers allowed to javascript code calling the API from an external service
        # this will add a response header Access-Control-Allow-Headers with content of the env var as value
        # mdn doc: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
        # default: header not set (empty value)
        # example value: Content-Type, Authorization
        #- ALLOW_HEADERS=

        # optional: modify the keepalive_timeout value
        # nginx doc: http://nginx.org/en/docs/http/ngx_http_core_module.html#keepalive_timeout
        # default: 10s
        # example value: 5s
        #- KEEPALIVE_TIMEOUT=10s

        #######################
        # REDIS CONFIGURATION #
        #######################
        # optional: use a redis server to store the PHP sessions
        # default value: false
        #- USE_REDIS=false
        # optional: set an IP or hostname for the redis server
        # default value: redis
        #- REDIS_HOST=redis
        # optional: set a custom port for redis
        # default value: 6379
        #- REDIS_PORT=6379
        # optional: set a username for redis
        # default value: <empty>
        #- REDIS_USERNAME=
        # optional: set a password for redis
        # default value: <empty>
        #- REDIS_PASSWORD=

        ######################
        # LDAP CONFIGURATION #
        ######################
        # optional: configure ldap certificate verification behavior: will create /etc/openldap/ldap.conf with TLS_REQCERT config line
        # default value: false
        # possible values: never, allow, try
        #- LDAP_TLS_REQCERT=false

        #################
        # MISCELLANEOUS #
        #################
        # optional: be less verbose during init
        # default value: false
        #- SILENT_INIT=false

        # optional: automatically install the database structure on container start
        # default value: false
        #- AUTO_DB_INIT=false

        # optional: automatically update the database structure on container start
        # default value: false
        #- AUTO_DB_UPDATE=false

        #######
        # DEV #
        #######
        # set to true in a development environment.
        # This will remove php cache, serve assets directly (instead of the brotli/gzip version) and make composer available.
        # default value: false
        #- DEV_MODE=false

    ports:
        # Important note about exposing ports: due to the way Docker deals with the host firewall, it is recommended to use '127.0.0.1:1234:443'
        # if you only want to expose the service locally (on port 1234 in this example). See https://github.com/moby/moby/issues/22054
        # Another option is to use the "expose" directive instead of "ports" and let your reverse proxy figure things out.
        #
        # if you want elabftw to run on a different port, change the first number
        # host:container
        - '443:443'
        # if you are aiming for running multiple instances of this container you can put a range like so:
        # - "3100-3200:443"
        # use redis for session storage if that is the case, or configure your load balancer with sticky sessions
    volumes:
        # this is where you will keep the uploaded files persistently
        # for Windows users it might look like this
        # - D:\Users\Nico\elab-data\web:/elabftw/uploads
        # host:container
        - /var/elabftw/web:/elabftw/uploads
        #
        # TLS configuration
        #
        # Note: if your certificate is not from letsencrypt, make sure to have those two files:
        #
        #       /etc/letsencrypt/live/SERVER_NAME/fullchain.pem
        #       /etc/letsencrypt/live/SERVER_NAME/privkey.pem
        #
        # in the folder /etc/letsencrypt (or any folder you like as long as you adapt the line below
        # replace SERVER_NAME with the value of SERVER_NAME of course.
        #
        # if you have enabled letsencrypt, uncomment the line below
        # path to the folder with TLS certificate + private key
        # host:container
        #- /etc/letsencrypt:/ssl
        #
        # MYSQL cert path
        #- /path/to/cert/folder:/mysql-cert

    # This part is just an example for having a custom DNS entry in /etc/hosts of the container
    # Use it if DNS resolution cannot work for some reason
    # The "extra_hosts" key must be aligned at the same indentation level as "ports" or "volumes" or "networks" blocks.
    #
    # extra_hosts:
    #   - internal.s3.example.org:10.12.34.56

    networks:
      - elabftw-net

  # the mysql database image
  # Note: if you already have a MySQL server running, you don't need to use this image, as you can use the already existing one
  # In this case, add the IP address of the server in DB_HOST and comment out or remove this block
  mysql:
    image: mysql:8.0
    restart: always
    # fix issue with "The server requested authentication method unknown to the client [caching_sha2_password]"
    # now commented out because no longer necessary
    #command: --default-authentication-plugin=mysql_native_password
    container_name: mysql
    # add an healthcheck block so the web container knows when it is ready to accept connections
    # use double $ here so env vars are correctly found
    healthcheck:
      test: "/usr/bin/mysql --user=$$MYSQL_USER --password=$$MYSQL_PASSWORD --execute 'SHOW DATABASES;'"
      interval: 5s
      timeout: 5s
      retries: 42
    # drop some capabilities
    cap_drop:
        - AUDIT_WRITE
        - MKNOD
        - SYS_CHROOT
        - SETFCAP
        - NET_RAW
    cap_add:
        - SYS_NICE
    environment:
        # need to change
        - MYSQL_ROOT_PASSWORD=cE7pCus5tQfNGDGR3OVMfvDL1w39YGw
        # no need to change
        - MYSQL_DATABASE=elabftw
        # no need to change
        - MYSQL_USER=elabftw
        # need to change IMPORTANT: this should be the same password as DB_PASSWORD from the elabftw container
        - MYSQL_PASSWORD=DpYyg1si1YMEC0CqDNAdU1wnoje6NtD
        # need to change, this is your timezone, see PHP_TIMEZONE from the elabftw container
        - TZ=Europe/Paris
        # Update this if you want to run the server on a different port than 3306.
        # - MYSQL_TCP_PORT=3306

    volumes:
        # this is where you will keep the database persistently
        # for Windows users it might look like this
        # - D:\Users\Nico\elab-data\mysql:/var/lib/mysql
        # host:container
        - /var/elabftw/mysql:/var/lib/mysql
     # The mysql container exposes 3306/33060. Though it does not make an operational difference,
     # make sure to document your usage here.
    expose:
      - '3306'
    networks:
      - elabftw-net

  # example of a redis container
  # uncomment if you want to spawn a redis container to manage sessions
  #redis:
  #  image: redis:6.0-alpine
  #  restart: always
  #  container_name: redis
  #  networks:
  #    - elabftw-net

  # example of a keeex container (experimental!)
  #keeex:
  #  image: repo.keeex.me/fkeeex_daemon:latest
  #  container_name: keeex
  #  restart: always
  #  environment:
  #    - FKEEEX_CONFIG_USER=user@example.org
  #    - FKEEEX_CONFIG_PASSWORD=
  #    # Set a random passphrase here. You can generate one with "openssl rand -base64 32".
  #    - FKEEEX_CONFIG_PASSPHRASE=
  #  expose:
  #    - 8080
  #  networks:
  #    - elabftw-net

  ###############################################################
  # EVERYTHING BELOW THIS LINE IS FOR DEVELOPMENT PURPOSES ONLY #
  # Except for the networks lines, so don't delete them!         #
  ###############################################################

  # PHPMYADMIN
  # uncomment this part if you want to have phpmyadmin running too
  #phpmyadmin:
  #    image: phpmyadmin/phpmyadmin
  #    container_name: phpmyadmin
  #    environment:
  #        - PMA_PORT=3307
  #    links:
  #        - mysql:db
  #    ports:
  #        - "8080:80"
  #    networks:
  #        - elabftw-net

  # SWAGGER UI
  # swagger allows you to consult the documentation generated by apidoc/v2/openapi.yaml
  # running a local container is perfect to see the changes right after a change
  #
  #swagger:
  #  image: swaggerapi/swagger-ui:v5.0.0
  #  restart: always
  #  container_name: swagger-elab-local
  #  ports:
  #    - "8085:8080"
  #  volumes:
  #    - /path/to/local/elabftw/apidoc/v2:/usr/share/nginx/html/swagger:ro
  #  environment:
  #    - API_URL=swagger/openapi.yaml
  #  networks:
  #      - elabftw-net


  # LDAP
  # example for ldap server + admin interface
  # uncomment if you want to work on LDAP authentication
  #ldap:
  #    image: osixia/openldap:1.4.0
  #    container_name: ldap
  #    restart: always
  #    hostname: example.org
  #    environment:
  #      - LDAP_TLS_VERIFY_CLIENT=try
  #      - LDAP_OPENLDAP_UID=1000
  #      - LDAP_OPENLDAP_GID=1000
  #    ports:
  #      - "389:389"
  #      - "636:636"
  #    volumes:
  #      - /var/elabftw/ldap-data/ldap:/var/lib/ldap
  #      - /var/elabftw/ldap-data/slapd.d:/etc/ldap/slapd.d
  #    networks:
  #        - elabftw-net
  #ldapadmin:
  #    image: osixia/phpldapadmin:0.9.0
  #    container_name: ldapadmin
  #    environment:
  #      - PHPLDAPADMIN_LDAP_HOSTS=ldap
  #    restart: always
  #    ports:
  #      - "6443:443"
  #    networks:
  #        - elabftw-net

# the internal elabftw network
networks:
  elabftw-net:

Output of uname -a

Linux ecs-b409 3.10.0-1160.92.1.el7.x86_64 #1 SMP Tue Jun 20 11:48:01 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux

Output of cat /etc/os-release

NAME="CentOS Linux"
VERSION="7 (Core)"
ID="centos"
ID_LIKE="rhel fedora"
VERSION_ID="7"
PRETTY_NAME="CentOS Linux 7 (Core)"
ANSI_COLOR="0;31"
CPE_NAME="cpe:/o:centos:centos:7"
HOME_URL="https://www.centos.org/"
BUG_REPORT_URL="https://bugs.centos.org/"

CENTOS_MANTISBT_PROJECT="CentOS-7"
CENTOS_MANTISBT_PROJECT_VERSION="7"
REDHAT_SUPPORT_PRODUCT="centos"
REDHAT_SUPPORT_PRODUCT_VERSION="7"

Output of docker info

Client: Docker Engine - Community
 Version:    25.0.4
 Context:    default
 Debug Mode: false
 Plugins:
  buildx: Docker Buildx (Docker Inc.)
    Version:  v0.13.0
    Path:     /usr/libexec/docker/cli-plugins/docker-buildx
  compose: Docker Compose (Docker Inc.)
    Version:  v2.24.7
    Path:     /usr/libexec/docker/cli-plugins/docker-compose

Server:
 Containers: 2
  Running: 2
  Paused: 0
  Stopped: 0
 Images: 4
 Server Version: 25.0.4
 Storage Driver: overlay2
  Backing Filesystem: extfs
  Supports d_type: true
  Using metacopy: false
  Native Overlay Diff: true
  userxattr: false
 Logging Driver: json-file
 Cgroup Driver: cgroupfs
 Cgroup Version: 1
 Plugins:
  Volume: local
  Network: bridge host ipvlan macvlan null overlay
  Log: awslogs fluentd gcplogs gelf journald json-file local splunk syslog
 Swarm: inactive
 Runtimes: io.containerd.runc.v2 runc
 Default Runtime: runc
 Init Binary: docker-init
 containerd version: ae07eda36dd25f8a1b98dfbf587313b99c0190bb
 runc version: v1.1.12-0-g51d5e94
 init version: de40ad0
 Security Options:
  seccomp
   Profile: builtin
 Kernel Version: 3.10.0-1160.92.1.el7.x86_64
 Operating System: CentOS Linux 7 (Core)
 OSType: linux
 Architecture: x86_64
 CPUs: 4
 Total Memory: 3.7GiB
 Name: ecs-b409
 ID: 505278ed-251f-4ae3-b187-ad8e8f303778
 Docker Root Dir: /var/lib/docker
 Debug Mode: false
 Experimental: false
 Insecure Registries:
  127.0.0.0/8
 Live Restore Enabled: false

Relevant php error log entry

No response

Additional information

No response

[MarcelBolten]

Hi @krasnabiotech

I assume this is a dev only environment and all your shared secrets are only used for dev purposes. Otherwise, change your secrets.

Regarding your actual question, you have to use yarn run watchjs. This will also compile css.

With yarn 4 we use pnp, compare to https://yarnpkg.com/configuration/yarnrc#nodeLinker. So there is no node_modules folder anymore.

Of course you can always run yarn buildall or yarn buildall:dev but you would need to run it everytime. watchjs is way more convenient during development.