Steps for incorporating universal style into Angular 6/7 library

Question

Steps for incorporating universal style into Angular 6/7 library

I attempted to incorporate global styles in my Angular app similar to how it's done, but unfortunately, it didn't work as expected.

The library I'm using is named example-lib. To include the styles, I added styles.css in the directory /projects/example-lib/. In the main angular.json file, I included the styles like this:

...
"example-lib": {
  "root": "projects/example-lib",
  "sourceRoot": "projects/example-lib/src",
  "projectType": "library",
  "prefix": "ngx",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "tsConfig": "projects/example-lib/tsconfig.lib.json",
        "project": "projects/example-lib/ng-package.json",
        "styles": [
          "projects/example-lib/styles.css" <!-- HERE 
        ],
      },
...

When attempting to build the library with the command:

ng build example-lib

An error occurred:

  Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(styles)

I believe there might be another method for adding global styles to a separate library. Can anyone provide guidance on this?

css angular styles angular-library

Answer 1

Answer №1

If you're looking for a way to make the styles of your library component global, I have a solution for you. By setting the view encapsulation to none in the root component, all styles will become global.

my-library.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'lib-my-library',
  templateUrl: './my-library.component.html',
  styleUrls: ['./my-library.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MyLibraryComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

my-library.component.html

<!-- html content -->

my-library.component.scss

@import './styles/core.scss';

Your my-library.component.scss and core.scss files are now global.

styles/core.scss

body {
    background: #333;
}

You can also include mixins and variables by following this answer.

Answer 2

If you're looking for a way to make the styles of your library component global, I have a solution for you. By setting the view encapsulation to none in the root component, all styles will become global.

my-library.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'lib-my-library',
  templateUrl: './my-library.component.html',
  styleUrls: ['./my-library.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MyLibraryComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

my-library.component.html

<!-- html content -->

my-library.component.scss

@import './styles/core.scss';

Your my-library.component.scss and core.scss files are now global.

styles/core.scss

body {
    background: #333;
}

You can also include mixins and variables by following this answer.

Answer 3

Answer №2

As previously mentioned by @codeepic, there is an existing standard solution.

To implement this in your project, simply add the following lines to your ng-package.json:

"assets": ["./styles/**/*.css"]

Make sure to adjust the paths to match your file locations, as they will also be mirrored in your /dist folder after building.

Once the build process is complete, users of your library can easily include these stylesheets in their projects using the following syntax:

/* styles.css */
@import url('node_modules/<your-library-name>/styles/<file-name>');

This method allows you to copy various types of files for distribution.

Additionally, keep in mind that when working with CSS, you have the option to create an index.css file which can be imported in a similar manner as

node_modules/<your-library-name>/styles

.

Answer 4

As previously mentioned by @codeepic, there is an existing standard solution.

To implement this in your project, simply add the following lines to your ng-package.json:

"assets": ["./styles/**/*.css"]

Make sure to adjust the paths to match your file locations, as they will also be mirrored in your /dist folder after building.

Once the build process is complete, users of your library can easily include these stylesheets in their projects using the following syntax:

/* styles.css */
@import url('node_modules/<your-library-name>/styles/<file-name>');

This method allows you to copy various types of files for distribution.

Additionally, keep in mind that when working with CSS, you have the option to create an index.css file which can be imported in a similar manner as

node_modules/<your-library-name>/styles

.

Answer 5

Answer №3

Based on the article Compiling css in new Angular 6 libraries:

To bundle the css, we need to install some devDependencies in our library:
- ng-packagr
- scss-bundle
- ts-node

Create a file called css-bundle.ts and add the following code:

import { relative } from 'path';
import { Bundler } from 'scss-bundle';
import { writeFile } from 'fs-extra';

/** Bundles all SCSS files into a single file */
async function bundleScss() {
  const { found, bundledContent, imports } = await new Bundler()
    .Bundle('./src/_theme.scss', ['./src/**/*.scss']);

  if (imports) {
    const cwd = process.cwd();

    const filesNotFound = imports
      .filter(x => !x.found)
      .map(x => relative(cwd, x.filePath));

    if (filesNotFound.length) {
      console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - ')}\n`);
      throw new Error('One or more SCSS imports failed');
    }
  }

  if (found) {
    await writeFile('./dist/_theme.scss', bundledContent);
  }
}

bundleScss();

Add _theme.scss inside the /src directory of the library that contains and imports all the css to be bundled.
Include a postbuild npm script to run the css-bundle.ts
Finally, include it in the styles tag of your Application in the angular.json file

Answer 6

Based on the article Compiling css in new Angular 6 libraries:

To bundle the css, we need to install some devDependencies in our library:
- ng-packagr
- scss-bundle
- ts-node

Create a file called css-bundle.ts and add the following code:

import { relative } from 'path';
import { Bundler } from 'scss-bundle';
import { writeFile } from 'fs-extra';

/** Bundles all SCSS files into a single file */
async function bundleScss() {
  const { found, bundledContent, imports } = await new Bundler()
    .Bundle('./src/_theme.scss', ['./src/**/*.scss']);

  if (imports) {
    const cwd = process.cwd();

    const filesNotFound = imports
      .filter(x => !x.found)
      .map(x => relative(cwd, x.filePath));

    if (filesNotFound.length) {
      console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - ')}\n`);
      throw new Error('One or more SCSS imports failed');
    }
  }

  if (found) {
    await writeFile('./dist/_theme.scss', bundledContent);
  }
}

bundleScss();

Add _theme.scss inside the /src directory of the library that contains and imports all the css to be bundled.
Include a postbuild npm script to run the css-bundle.ts
Finally, include it in the styles tag of your Application in the angular.json file

Answer 7

Answer №4

Discover the solution for this particular issue

To resolve this, make sure to include cpx and scss-bundle as development dependencies in your package.json. Then, insert the following code within the "scripts" section of your package.json:

"scripts": {
  ...
  "build-mylib": "ng build mylib && npm run build-mylib-styles && npm run cp-mylib-assets",
  "build-mylib-styles": "cpx \"./projects/mylib/src/lib/style/**/*\" \"./dist/mylib/style\" && scss-bundle -e ./projects/mylib/src/lib/style/_style.scss -d ./dist/mylib/style/_styles.scss",
  "cp-mylib-assets": "cpx \"./src/assets/**/*\" \"./dist/mylib/assets\"",
  ...
}

Ensure to replace "mylib" with your actual library name before running the command build-mylib in your terminal. This will compile your scss assets into the dist folder.

If you wish to use these global styles in your current Angular project, remember to import them in your angular.json file under project settings:

"styles": [
  "src/styles.scss",
  "dist/my-shiny-library/_theme.scss"
],

(use dist if your project is in the same workspace, or node_module if it's an imported library)

Answer 8

Discover the solution for this particular issue

To resolve this, make sure to include cpx and scss-bundle as development dependencies in your package.json. Then, insert the following code within the "scripts" section of your package.json:

"scripts": {
  ...
  "build-mylib": "ng build mylib && npm run build-mylib-styles && npm run cp-mylib-assets",
  "build-mylib-styles": "cpx \"./projects/mylib/src/lib/style/**/*\" \"./dist/mylib/style\" && scss-bundle -e ./projects/mylib/src/lib/style/_style.scss -d ./dist/mylib/style/_styles.scss",
  "cp-mylib-assets": "cpx \"./src/assets/**/*\" \"./dist/mylib/assets\"",
  ...
}

Ensure to replace "mylib" with your actual library name before running the command build-mylib in your terminal. This will compile your scss assets into the dist folder.

If you wish to use these global styles in your current Angular project, remember to import them in your angular.json file under project settings:

"styles": [
  "src/styles.scss",
  "dist/my-shiny-library/_theme.scss"
],

(use dist if your project is in the same workspace, or node_module if it's an imported library)

Answer 9

Answer №5

1- Make sure to include your styles within the library directory

For example:

projects/your-lib-name/assets/styles.css

2- Next, in your ng-package.json file (located within the library), add the assets rule

    {
      "$schema": ...  , 
      "dest": ...   , 
>     "assets": [
>         "./assets/*"
>       ],
      "lib": ...
    }

3- Within your application, you can now utilize this asset

  "styles": [
              "../your-lib-name/assets/styles.css"
            ]

Check out this tutorial for more guidance

Answer 10

1- Make sure to include your styles within the library directory

For example:

projects/your-lib-name/assets/styles.css

2- Next, in your ng-package.json file (located within the library), add the assets rule

    {
      "$schema": ...  , 
      "dest": ...   , 
>     "assets": [
>         "./assets/*"
>       ],
      "lib": ...
    }

3- Within your application, you can now utilize this asset

  "styles": [
              "../your-lib-name/assets/styles.css"
            ]

Check out this tutorial for more guidance

Steps for incorporating universal style into Angular 6/7 library

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Discovering more about this topic

Checkable Ionic Table

TS2339: The 'map' property is not available on the 'Object' type

Is there a way to disable auto rotation on a website when accessed from a mobile phone?

Align list items vertically, even when they have varying heights

Designing a toggle button interface with Material UI

Does the color of the item change as it gets older?

Finding the Perfect Placement for an Element in Relation to its Companion

MVC Template with a Defective BootStrap

Developing interconnected dropdowns in Angular 8 for input fields

The side navigation panel transition is stuck and failing to slide out as intended

What is the best way to navigate between different areas of an image using html and javascript?

Using the feColorMatrix SVG filter in CSS versus applying it in JavaScript yields varied outcomes

What's the best way to make sure my table fits perfectly within its container's width?

The primary container is brimming with an abundance of content

What is the process of playing blob videos (avi, mov) in Angular14?

The publish-subscribe feature appears to be ineffective

Require that double-width unicode symbols are displayed as double-width in Markdown or CSS

Tips for keeping a div centered even when the window is resized to smaller than the background width

What is the best way to incorporate infinite scrolling into my Angular carousel implementation?