Angular Project - Is it possible to call Node_modules any bootstrap SCSS File from Custom component

0
votes

In Angular Setup, How to call any Bootstrap SCSS file in Custom Component through Style.SCSS Bootstrap is in node_modules which is called Angular.json.. Footer.component.scss file is custom component in which I need to access node_modules bootstrap scss packages..

Angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "NG": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/SA-NG",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "aot": true,
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "./node_modules/bootstrap/scss/bootstrap.scss",
                            "src/styles.scss"
                        ],
                        "scripts": [
                            "node_modules/bootstrap/dist/js/bootstrap.js"
                        ]
                    },

footer.component.scss

.footer {
    padding: 40px 60px;
    background: #2f2f2f;
    .col-md-3.footer-tagline {
        width: 21%;
        text-align: right;
    }
    .row.footer-address {
        ul {
            min-height: 1px;
        }
    }
    .footer-copyright {
        ul {
            min-height: 1px;
        }
    }
    .footer-investinfo {
        .col-md-12 {
            padding-left: 0;
            border-bottom: 1px dashed #4c4c4c;
            .col-md-4 {
                padding-left: 0;
            }
        }
    }
    .footer-iitxt {
        .col-md-4 {
            padding-left: 0;
        }
        overflow: hidden;
        border-bottom: 1px dashed #4c4c4c;
        padding: 8px 0;
    }
}

@include media-breakpoint-up(md) {
    .footer {
        .footer-iitxt {
            .col-md-4 {
                padding-left: 0;
            }
            overflow: hidden;
            border-bottom: 1px dashed #4c4c4c;
            padding: 8px 0;
        }
    }
}

src/styles.scss

@importe "../node_modules/bootstrap/scss/bootstrap.scss";
@importe './app/footer/footer.component.scss';

Facing below error

Error

1
angulartwitter-bootstrapwebpacksass
There is a undefined variable at line no 579. - Mohamed Yaseen
I've used the variables.scss from bootstrap and not added any variables to it.. I just want to call the bootstrap.scss or any SCSS file from node_modules to src/styles.scss - senthilpandi
Remove the leading "./" from Bootstrap path in your json file and try. - skm
Please don't take pictures of code / errors, copy the actual text here. - James Z
shared the code.. Kindly help on this - senthilpandi

1 Answers

1
votes

You can remove it from angular.json and import it in your styles.scss :

@import '~bootstrap/scss/bootstrap';