Styles

HSLayers-NG uses SASS (in a SCSS syntax) for style definition.

Bootstrap is used for styling of the components. However, only a subset of Bootstrap styles is included in our SCSS styles by default. Refer to app.scss to see which modules are included. If you need other Bootstrap styles in your app, you have to include them in your custom.scss along with some other critical definition modules. E.g. for usage of spinner:

@import "~bootstrap/scss/_functions";
@import "~bootstrap/scss/_variables";
@import "~bootstrap/scss/_mixins";
@import "~bootstrap/scss/spinners";

For compatible Bootstrap versions see a table in our main README.

You can generally extend your app with any styles you like in your custom SCSS file.

---

DOCUMENTATION VALID FOR HSLayers-NG version ^2.5

Path to this file must then be properly stated in a sass-loader definition of your webpack config. E.g. for a file named custom.scss located under ./src:

      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: fs.existsSync('./src/custom.scss')
                ? `@use "src/custom.scss" as *;`
                : '',
            },
          },
        ],
      },

---

Note that styles from your file will be loaded first, so you can use it to overwrite values defined in HSLayers.