One place for hosting & domains

      How To Sync and Share Your Files with Seafile on Ubuntu 20.04


      Introduction

      Seafile is an open source, self-hosted, file synchronization and sharing platform. Users can store and optionally encrypt data on their own servers with storage space as the only limitation. With Seafile you can share files and folders using cross-platform syncing and password-protected links to files with expiration dates. A file-versioning feature means that users can restore deleted and modified files or folders.

      In this tutorial you will install and configure Seafile on an Ubuntu 20.04 server. You will use MariaDB to store data for the different components of Seafile, and Apache as the proxy server to handle the web traffic. After completing this tutorial you will be able use the web interface to access Seafile from desktop or mobile clients, allowing you to sync and share your files with other users or groups on the server or with the public.

      Prerequisites

      Before you begin this guide, you’ll need the following:

      Step 1 — Creating Databases for the Seafile Components

      Seafile requires three components in order to work properly. These three components are:

      • Seahub: Seafile’s web frontend, written in Python using the Django web framework. From Seahub you can access, manage, and share your files using a web browser.
      • Seafile server: The data service daemon that manages the raw file upload, download, and synchronization. You do not interact with the server directly, but use one of the client programs or the Seahub web interface.
      • Ccnet server: The RPC service daemon to enable internal communication between the different components of Seafile. For example, when you use Seahub, it is able to access data from the Seafile server using the Ccnet RPC service.

      Each of these components stores its data separately in its own database. In this step you will create the three MariaDB databases and a user before proceeding to set up the server.

      First, log in to the server using SSH with your username and IP address:

      Connect to the MariaDB database server as administrator (root):

      At the MariaDB prompt, use the following SQL command to create the database user:

      • CREATE USER 'sammy'@'localhost' IDENTIFIED BY 'password';

      Next, you will create the following databases to store the data of the three Seafile components:

      • ccnetdb for the Ccnet server.
      • seahubdb for the Seahub web frontend.
      • seafiledb for the Seafile file server.

      At the MariaDB prompt, create your databases:

      • CREATE DATABASE `ccnetdb` CHARACTER SET = 'utf8';
      • CREATE DATABASE `seafiledb` CHARACTER SET = 'utf8';
      • CREATE DATABASE `seahubdb` CHARACTER SET = 'utf8';

      Then, grant all privileges to the Seafile database user to access and make changes in these databases:

      • GRANT ALL PRIVILEGES ON `ccnetdb`.* to `sammy`@localhost;
      • GRANT ALL PRIVILEGES ON `seafiledb`.* to `sammy`@localhost;
      • GRANT ALL PRIVILEGES ON `seahubdb`.* to `sammy`@localhost;

      Exit the MariaDB prompt by typing exit:

      Now that you have created a user and the databases required to store the data for each of the Seafile components, you will install dependencies necessary for configuration of the Seafile server package.

      Step 2 — Installing Dependencies and Downloading Seafile

      Some parts of Seafile are written in Python and therefore require additional Python modules and programs to work. In this step, you will install these required dependencies before downloading and extracting the Seafile server package.

      First, install pip — the Python package manager. The corresponding Debian package is called python3-pip. You can install it using apt:

      • sudo apt install -y python3-pip

      Once pip is installed, you can install additional dependencies from the Python package index (PyPI) using the pip3 command:

      • pip3 install Pillow captcha django-simple-captcha

      NOTE: Using sudo with the pip3 install command above is not necessary. These packages will be installed in the sammy user’s home directory under /home/sammy/.local/lib/python3.8/site-packages and so does not require root privileges.

      Seafile requires Pillow, a python library for image processing, and captcha and django-simple-captcha to provide captcha support for authentication.

      Now that you have installed the necessary dependencies, you can download the Seafile server package.

      Seafile creates additional directories during setup. To keep them all organized, create a new directory and change into it:

      You can now download the latest version (7.1.4 as of this writing) of the Seafile server from the website by running the following command:

      • wget https://download.seadrive.org/seafile-server_7.1.4_x86-64.tar.gz

      Seafile distributes the download as a compressed tar archive, which means you will need to extract it before proceeding. Extract the archive using tar:

      • tar -zxvf seafile-server_7.1.4_x86-64.tar.gz

      Now change into the extracted directory:

      At this stage, you have downloaded and extracted the Seafile server package and have also installed the necessary dependencies. You are now ready to configure the Seafile server.

      Step 3 — Configuring the Seafile Server

      Seafile needs some information about your setup before you start the services for the first time. This includes details like the domain name and the database configuration. To initiate the series of question prompts to provide this information, you can run the script setup_seafile_mysql.sh, which is included in the archive you extracted in the previous step.

      Run the script using bash:

      • bash setup-seafile-mysql.sh

      Press ENTER to continue.

      The script will now prompt you with a series of questions. Wherever defaults are mentioned, pressing the ENTER key will use that value.

      This tutorial uses Seafile as the server name, but you can change it if necessary.

      What is the name of the server?
      It will be displayed on the client. 3 - 15 letters or digits
      [ server name ] Seafile
      

      Next, enter the domain name for this Seafile instance.

      What is the ip or domain of the server?.
      For example: www.mycompany.com, 192.168.1.101
      [ This server's ip or domain ] your_domain
      

      For the fileserver port, press ENTER to accept the default value.

      Which port do you want to use for the seafile fileserver?
      [ default "8082" ]
      

      The next prompt allows you to confirm the database configuration. You can create new databases or use existing databases for setup. For this tutorial you have created the necessary databases in Step 1, so select option 2 here.

      -------------------------------------------------------
      Please choose a way to initialize seafile databases:
      -------------------------------------------------------
      
      [1] Create new ccnet/seafile/seahub databases
      [2] Use existing ccnet/seafile/seahub databases
      
      [ 1 or 2 ] 2
      

      The remaining questions relate to the MariaDB database server. You will only need to provide the username and password of the mariadb user that you created in Step 1. Press ENTER to accept the default values for host and port.

      
      What is the host of mysql server?
      
      [ default "localhost" ]
      
      What is the port of mysql server?
      
      [ default "3306" ]
      
      Which mysql user to use for seafile?
      
      [ mysql user for seafile ] sammy
      
      What is the password for mysql user "seafile"?
      
      [ password for seafile ] password
      

      After providing the password, the script will request the names of the Seafile databases. Use ccnetdb, seafiledb, and seahubdb for this tutorial. The script will then verify if there is a successful connection to the databases before proceeding to display a summary of the initial configuration.

      Enter the existing database name for ccnet:
      [ ccnet database ] ccnetdb
      
      verifying user "sammy" access to database ccnetdb ...  done
      
      Enter the existing database name for seafile:
      [ seafile database ] seafiledb
      
      verifying user "sammy" access to database seafiledb ...  done
      
      Enter the existing database name for seahub:
      [ seahub database ] seahubdb
      
      verifying user "sammy" access to database seahubdb ...  done
      
      ---------------------------------
      This is your configuration
      ---------------------------------
      
          server name:            Seafile
          server ip/domain:       your_domain
      
          seafile data dir:       /home/sammy/seafile/seafile-data
          fileserver port:        8082
      
          database:               use existing
          ccnet database:         ccnetdb
          seafile database:       seafiledb
          seahub database:        seahubdb
          database user:          sammy
      
      --------------------------------
      Press ENTER to continue, or Ctrl-C to abort
      ---------------------------------
      

      Press ENTER to confirm.

      Output

      Generating ccnet configuration ... done Successly create configuration dir /home/sammy/seafile/ccnet. Generating seafile configuration ... done Generating seahub configuration ... ---------------------------------------- Now creating seahub database tables ... ---------------------------------------- creating seafile-server-latest symbolic link ... done ----------------------------------------------------------------- Your seafile server configuration has been finished successfully. ----------------------------------------------------------------- run seafile server: ./seafile.sh { start | stop | restart } run seahub server: ./seahub.sh { start <port> | stop | restart <port> } ----------------------------------------------------------------- If you are behind a firewall, remember to allow input/output of these tcp ports: ----------------------------------------------------------------- port of seafile fileserver: 8082 port of seahub: 8000 When problems occur, Refer to https://github.com/haiwen/seafile/wiki for information.

      As you will be running Seafile behind Apache, opening ports 8082 and 8000 in the firewall is not necessary, so you can ignore this part of the output.

      You have completed the initial configuration of the server. In the next step, you will configure the Apache web server before starting the Seafile services.

      Step 4 — Configuring the Apache Web Server

      In this step, you will configure the Apache web server to forward all requests to Seafile. Using Apache in this manner allows you to use a URL without a port number, enable HTTPS connections to Seafile, and make use of the caching functionality that Apache provides for better performance.

      To begin forwarding requests, you will need to enable the proxy_http module in the Apache configuration. This module provides features for proxying HTTP and HTTPS requests. The following command will enable the module:

      Note: The Apache rewrite and ssl modules are also required for this setup. You have already enabled these modules as part of configuring Let’s Encrypt in the second Apache tutorial listed in the prerequisites section.

      Next, update the virtual host configuration of your_domain to forward requests to the Seafile file server and to the Seahub web interface.

      Open the configuration file in a text editor:

      • sudo nano /etc/apache2/sites-enabled/your_domain-le-ssl.conf

      The lines from ServerAdmin to SSLCertificateKeyFile are part of the initial Apache and Let’s Encrypt configuration that you set up as part of the prerequisite. Add the highlighted content, beginning at Alias and ending with the ProxyPassReverse directive:

      /etc/apache2/sites-enabled/your_domain-le-ssl.conf

      
      <IfModule mod_ssl.c>
      <VirtualHost *:443>
          ServerAdmin admin@your_domain
          ServerName your_domain
          ServerAlias www.your_domain
          DocumentRoot /var/www/your_domain/html
          ErrorLog ${APACHE_LOG_DIR}/your_domain-error.log
          CustomLog ${APACHE_LOG_DIR}/your_domain-access.log combined
      
          SSLCertificateFile /etc/letsencrypt/live/your_domain/fullchain.pem
          SSLCertificateKeyFile /etc/letsencrypt/live/your_domain/privkey.pem
          Include /etc/letsencrypt/options-ssl-apache.conf
      
          Alias /media  /home/sammy/seafile/seafile-server-latest/seahub/media
          <Location /media>
              Require all granted
          </Location>
      
          # seafile fileserver
          ProxyPass /seafhttp http://127.0.0.1:8082
          ProxyPassReverse /seafhttp http://127.0.0.1:8082
          RewriteEngine On
          RewriteRule ^/seafhttp - [QSA,L]
      
          # seahub web interface
          SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
          ProxyPass / http://127.0.0.1:8000/
          ProxyPassReverse / http://127.0.0.1:8000/
      </VirtualHost>
      </IfModule>
      

      The Alias directive maps the URL path your_domain/media to a local path in the file system that Seafile uses. The following Location directive enables access to content in this directory. The ProxyPass and ProxyPassReverse directives make Apache act as a reverse proxy for this host, forwarding requests to / and /seafhttp to the Seafile web interface and file server running on local host ports 8000 and 8082 respectively. The RewriteRule directive passes all requests to /seafhttp unchanged and stops processing further rules ([QSA,L]).

      Save and exit the file.

      Test if there are any syntax errors in the virtual host configuration:

      • sudo apache2ctl configtest

      If it reports Syntax OK, then there are no issues with your configuration. Restart Apache for the changes to take effect:

      • sudo systemctl restart apache2

      You have now configured Apache to act as a reverse proxy for the Seafile file server and Seahub. Next, you will update the URLs in Seafile’s configuration before starting the services.

      Step 5 — Updating Seafile’s Configuration and Starting Services

      As you are now using Apache to proxy all requests to Seafile, you will need to update the URLs in Seafile’s configuration files in the conf directory using a text editor before you start the Seafile service.

      Open ccnet.conf in a text editor:

      • nano /home/sammy/seafile/conf/ccnet.conf

      Modify the SERVICE_URL setting in the file to point to the new HTTPS URL without the port number, for example:

      Update /home/sammy/seafile/conf/ccnet.conf

      SERVICE_URL = https://your_domain
      

      Save and exit the file once you have added the content.

      Now open seahub_settings.py in a text editor:

      • nano /home/sammy/seafile/conf/seahub_settings.py

      You can now add a FILE_SERVER_ROOT setting in the file to specify the path where the file server is listening for file uploads and downloads:

      Update /home/sammy/seafile/conf/seahub_settings.py

      SECRET_KEY = "..."
      FILE_SERVER_ROOT = 'https://your_domain/seafhttp'
      

      Save and exit seahub_settings.py.

      Now you can start the Seafile service and the Seahub interface:

      • cd /home/sammy/seafile/seafile-server-7.1.4
      • ./seafile.sh start
      • ./seahub.sh start

      As this is the first time you have started the Seahub service, it will prompt you to create an admin account. Enter a valid email address and a password for this admin user:

      Output

      What is the email for the admin account? [ admin email ] admin@your_domain What is the password for the admin account? [ admin password ] password-here Enter the password again: [ admin password again ] password-here ---------------------------------------- Successfully created seafile admin ---------------------------------------- Seahub is started Done.

      Open https://your_domain in a web browser and log in using your Seafile admin email address and password.

      Login screen of the Seafile web interface

      Once logged in successfully, you can access the admin interface or create new users.

      Now that you have verified the web interface is working correctly, you can enable these services to start automatically at system boot in the next step.

      Step 6 — Enabling the Seafile Server to Start at System Boot

      To enable the file server and the web interface to start automatically at boot, you can create the respective systemd service files and activate them.

      Create a systemd service file for the Seafile file server:

      • sudo nano /etc/systemd/system/seafile.service

      Add the following content to the file:

      Create /etc/systemd/system/seafile.service

      [Unit]
      Description=Seafile
      After=network.target mariadb.service
      
      [Service]
      Type=forking
      ExecStart=/home/sammy/seafile/seafile-server-latest/seafile.sh start
      ExecStop=/home/sammy/seafile/seafile-server-latest/seafile.sh stop
      User=sammy
      Group=sammy
      
      [Install]
      WantedBy=multi-user.target
      

      Here, the ExectStart and ExecStop lines indicate the commands that run to start and stop the Seafile service. The service will run with sammy as the User and Group. The After line specifies that the Seafile service will start after the networking and MySQL service has started.

      Save seafile.service and exit.

      Create a systemd service file for the Seahub web interface:

      • sudo nano /etc/systemd/system/seahub.service

      This is similar to the Seafile service. The only difference is that the web interface is started after the Seafile service. Add the following content to this file:

      Create /etc/systemd/system/seahub.service

      [Unit]
      Description=Seafile hub
      After=network.target seafile.service
      
      [Service]
      Type=forking
      ExecStart=/home/sammy/seafile/seafile-server-latest/seahub.sh start
      ExecStop=/home/sammy/seafile/seafile-server-latest/seahub.sh stop
      User=sammy
      Group=sammy
      
      [Install]
      WantedBy=multi-user.target
      

      Save seahub.service and exit.

      You can learn more about systemd unit files in the Understanding Systemd Units and Unit Files tutorial.

      Finally, to enable both the Seafile and Seahub services to start automatically at boot, run the following commands:

      • sudo systemctl enable seafile.service
      • sudo systemctl enable seahub.service

      When the server is rebooted, Seafile will start automatically.

      At this point, you have completed setting up the server, and can now test each of the services.

      Step 7 — Testing File Syncing and Sharing Functionality

      In this step, you will test the file synchronization and sharing functionality of the server you have set up and ensure they are working correctly. To do this, you will need to install the Seafile client program on a separate computer and/or a mobile device.

      Visit the download page on the Seafile website and follow the instructions to install the latest version of the program on your computer. Seafile clients are available for the various distributions of Linux (Ubuntu, Debian, Fedora, Centos/RHEL, Arch Linux), MacOS, and Windows. Mobile clients are available for Android and iPhone/iPad devices from the respective app stores.

      Once you have installed the Seafile client, you can test the file synchronization and sharing functionality.

      Open the Seafile client program on your computer or device. Accept the default location for the Seafile folder and click Next.

      In the next window, enter the server address, username, and password, then click Login.

      At the home page, right click on My Library and click Sync this library. Accept the default value for the location on your computer or device.

      Seafile client — Sync the default library

      Add a file, for example a document or a photo, into the My Library folder. After some time, the file will upload to the server. The following screenshot shows the file photo.jpg copied to the My Library folder.

      Add a file to the default library from the computer

      Now, log in to the web interface at https://your_domain and verify that your file is present on the server.

      My Library page to verify file sync

      Click on Share next to the file to generate a download link for this file that you can share.

      You have verified that the file synchronization is working correctly and that you can use Seafile to sync and share files and folders from multiple devices.

      Conclusion

      In this tutorial you set up a private instance of a Seafile server. Now you can start using the server to synchronize files, add users and groups, and share files between them or with the public without relying on an external service.

      When a new release of the server is available, please consult the upgrade section of the manual for steps to perform an upgrade.



      Source link

      Use ExpressJS to Deliver HTML Files


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      In Node.js and ExpressJS applications, there used to be a very simple way to deliver an HTML file or any other sort of file: res.sendfile(). Delivering HTML files using Express helps make development quick and easy when you need a quick HTTP server.

      Recently, this function has become deprecated by ExpressJS and if you try using the function, you’ll get an error saying that function is deprecated and you should use res.sendFile().

      Using res.sendFile()

      To use res.sendFile, we will need to pass in a path to the file.

      We will also need to pull in the built-in path module so that we can link to the file.

      Here is an example of using res.sendFile() to deliver an HTML page.

      var express = require('express');
      var app = express();
      var path = require('path');
      
      // viewed at http://localhost:8080
      app.get('/', function(req, res) {
          res.sendFile(path.join(__dirname + '/index.html'));
      });
      
      app.listen(8080);
      

      Sample Code

      We’ll need a Node application to start. So you can create one by running the following commands:

      • mkdir express-sendfile
      • cd sendfile
      • npm init
      • npm install express --save
      • touch server.js index.html

      Now we have the foundation for our quick Node app. server.js will be the file that will contain the route to serve our index.html file.

      server.js

      var express = require('express');
      var app = express();
      var path = require('path');
      
      // viewed at http://localhost:8080
      app.get('/', function(req, res) {
          res.sendFile(path.join(__dirname + '/index.html'));
      });
      
      app.listen(8080);
      

      index.html

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Sample Site</title>
      
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
          <style>
              body { padding-top:50px; }
          </style>
      </head>
      <body>
      
          <div class="container">
              <div class="jumbotron">
                  <h1>res.sendFile() Works!</h1>
              </div>
          </div>
      
      </body>
      </html>
      

      Now after our server has been started using:

      We can see our site in our browser!

      example html file served through expressjs

      Conclusion

      res.sendFile() is a very easy function to use. Express provides a great many tools for Node users and we can even use this to deliver downloadable files or any files really.



      Source link

      Angular – Shortcut to Importing Styles Files in Components


      In a typical Angular project, you’ll have many components. Each components has it own stylesheet (css, scss, less, etc). It’s quite often that you might need to include global styling files (especially variables file) in your component.

      We’ve talked on this a bit in our other Angular styles article: Using Sass with the Angular CLI

      Let’s explore another option for importing style files:

      A Sass Variables Sample

      Let’s say you have a _variables.scss in your src/stylings folder:

      // your folder structure
      - src
          - app
              - app.component.ts
                  - hello
                      - hello.component.html
                      - hello.component.scss
                      - hello.component.ts
              - ...
          - stylings
              - _variables.scss
      
      // your _variables.scss file
      $brand-color: #800000;
      

      Reference to the Variables file

      Below is our hello.component.html file, let’s style the header with our brand-color.

      <!-- hello.component.html -->
      <h1>
        Hello World!
      </h1>
      

      The $brand-color variable is in stylings/_variables.scss file. We need to import the file in order to use it:

      // hello.component.scss
      @import "../../../stylings/variables"; // this is not cool!
      
      h1 {
          color: $brand-color;
      }
      

      See the ../../../stylings/ syntax? Do you like it?

      Imagine you need to repeat this ../../../stylings/ in another tens or hundreds of components and you need to remember the relative path. This is not cool. Let’s fix this!

      Shortcut with Angular CLI configuration

      If your project is generated with Angular CLI, you can add a configuration stylePreprocessorOptions > includePaths in .angular.cli.json file. This configuration allows you to add extra base paths that will be checked for imports. It tells Angular CLI to look for styling files in the mentioned paths before processing each component style file.

      For example, in our case, let’s add ./stylings in the paths. Since the configuration accept an array, you can add multiple paths.

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    "./stylings"
                  ]
              }
      
          }]
      }
      

      With this, we can update our hello.component.scss to just @import "variables". Sweet!

      // hello.component.scss
      @import "variables"; // change to just variables, say goodbye to ../../../stylings/
      
      h1 {
          color: $brand-color;
      }
      

      What if you have duplicated file name in paths?

      Imagine you included two styling paths in .angular.cli.json, both have _variables.scss file. Guess what will happen? Will the CLI pick up both files or throw errors?

      Let’s test it out together!

      // your folder structure
      - src
          - ...
          - stylings
              - _variables.scss
          - stylings2 // add this
              - _variables.scss
      

      In stylings2/_variables.scss, you have the following styles,

      // stylings2/_variables.scss
      $brand-color: blue;
      $font-size-large: 40px;
      

      Update your .angular.cli.json configurations, to include styling2 folder path.

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    "./stylings",
                    "./stylings2"
                  ]
              }
      
          }]
      }
      

      Update your hello.component.scss file,

      // hello.component.scss
      @import "variables";
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
      }
      

      Restart your dev server. Wait for a while, and you should expect… Error!
      Error, Undefined variable

      Tell me why!

      Turn out, if there are multiple files with same name, Angular CLI will pick only the first file that match the name. In this case, it will pick the stylings/_variables.scss file. That’s why it could not get the variable $font-size-large, because it’s in styling2/_variables.scss file.

      But… I really need two files with the same name!

      Well, there are cases where you have multiple files with the same name and you really need it, and you would like to have shortcuts as well. The workaround would be including the parent path. For example, in our case, both stylings and stylings2 folders parent are src.

      We can update the .angular.cli.json configuration to the following:

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    "."
                  ]
              }
      
          }]
      }
      

      Then, in your hello.component.scss, you can refer to both variables file like the following,

      // hello.component.scss
      @import "stylings/variables";
      @import "stylings2/variables"; 
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
      }
      

      Well, it’s not perfect, slightly more words to type, but better than ../../../ right? Also, it might be rare scenario that you have multiple style files with same name in the same project, I guess?

      Another shorter workaround would be including parent path and one styling path:

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    ".",
                    "./stylings"
                  ]
              }
      
          }]
      }
      

      You can save a few lines in your hello.component.scss.

      // hello.component.scss
      @import "variables"; // shorter, don't need styling/ as it's one of the configured paths
      @import "stylings2/variables"; 
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
      }
      

      What about including paths in node_modules?

      The Angular CLI configuration is applicable to files in node_modules as well. Let’s say you are using your custom styling npm package, for example bootstrap-sass module.

      npm install bootstrap-sass --save
      

      Here is the folder structure of bootstrap-sass:

      - node_modules
          - bootstrap-sass
              - assets
                  - stylesheets
                      - bootstrap
                          - ...
                          - _grid.scss
                          - _variables.scss
      

      Let’s say you would like to use the bootstrap’s _variables.scss, you can update your .angular.cli.json file to include bootstrap path,

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    ".",
                    "./stylings",
                    "../node_modules/bootstrap-sass/assets/stylesheets"
                  ]
              }
      
          }]
      }
      

      Then, in your hello.component.scss, you can refer to the bootstrap variables file like the following,

      // hello.component.scss
      @import "variables";
      @import "stylings2/variables"; 
      @impoer "bootstrap/variables";
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
          font-family: $font-family-serif;
      }
      

      Summary

      Let’s remove the relative path hell (../../../) with this useful Angular CLI configuration!

      That’s it. Happy coding!



      Source link