boostrap import style issue

hashika2 commented 1 year ago

Is this a regression?

[ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

angular cli 16.0.3

Description

I have a issue when run the application. Says like

i also tried with given solution in here but it's not working for me. in my styles.scss

`/ You can add global styles to this file, and also import other style files /

// Global icon font @import "./assets/fonts/feather/style.css";

// // 3rd party plugins @import "~@mdi/font/css/materialdesignicons.min.css"; @import '~perfect-scrollbar/css/perfect-scrollbar.css'; @import "~highlight.js/styles/googlecode.css"; @import '~animate.css/animate.min.css'; @import "~@ng-select/ng-select/themes/default.theme.css"; @import "~metismenujs/scss/metismenujs"; @import '~quill/dist/quill.snow.css'; @import '~simple-datatables/dist/style.css'; @import '~@swimlane/ngx-datatable/index.css'; @import '~@swimlane/ngx-datatable/themes/bootstrap.css'; @import '~@swimlane/ngx-datatable/assets/icons.css'; @import '~lightgallery/scss/lightgallery'; @import '~dropzone/dist/min/dropzone.min.css';

// NobleUI styles for LTR @import "./assets/scss/style";

// NobleUI styles For RTL // @import "./assets/scss/style.rtl.css"; @import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"; `

and the style.scss file

`/*

NobleUI - Angular Admin Dashboard Template v2.0.1
Copyright © 2022 NobleUI
Licensed under ThemeForest License */

// Theme style for demo1 (Vertical-Menu-Light & Vertical-Menu-Light-RTL)

// Custom variables @import './variables';

// Bootstrap stylesheets @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/utilities";

// Bootstrap layout & components @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; @import "bootstrap/scss/type"; @import "bootstrap/scss/images"; @import "bootstrap/scss/containers"; @import "bootstrap/scss/grid"; @import "bootstrap/scss/tables"; @import "bootstrap/scss/forms"; @import "bootstrap/scss/buttons"; @import "bootstrap/scss/transitions"; @import "bootstrap/scss/dropdown"; @import "bootstrap/scss/button-group"; @import "bootstrap/scss/nav"; @import "bootstrap/scss/navbar"; @import "bootstrap/scss/card"; @import "bootstrap/scss/accordion"; @import "bootstrap/scss/breadcrumb"; @import "bootstrap/scss/pagination"; @import "bootstrap/scss/badge"; @import "bootstrap/scss/alert"; @import "bootstrap/scss/progress"; @import "bootstrap/scss/list-group"; @import "bootstrap/scss/close"; @import "bootstrap/scss/toasts"; @import "bootstrap/scss/modal"; @import "bootstrap/scss/tooltip"; @import "bootstrap/scss/popover"; @import "bootstrap/scss/carousel"; @import "bootstrap/scss/spinners";

// Bootstrap helpers @import "bootstrap/scss/helpers";

// Bootstrap utilities @import './utilities'; @import "bootstrap/scss/utilities/api";

// Custom mixins @import './mixins/animation'; @import './mixins/buttons'; @import './mixins/misc'; @import './mixins/width';

// Core styles @import './background'; @import './reset'; @import './functions'; @import './misc'; @import './helpers'; @import './typography'; @import './demo'; @import './spinner';

// Layout @import './vertical-wrapper'; @import './navbar'; @import './sidebar'; @import './layouts';

// components @import "./components/badges"; @import "./components/bootstrap-alert"; @import "./components/breadcrumbs"; @import "./components/buttons"; @import "./components/cards"; @import "./components/datepicker"; @import "./components/dropdown"; @import "./components/forms"; @import "./components/icons"; @import "./components/nav"; @import "./components/pagination"; @import "./components/rating"; @import "./components/tables";

// Pages @import "./components/dashboard"; @import "./components/timeline"; @import "./components/auth"; @import "./components/chat";

// Email @import "./components/email/inbox";

// Plugin overrides @import "./components/plugin-overrides/full-calendar"; @import "./components/plugin-overrides/ng-select"; @import "./components/plugin-overrides/ngx-chips"; @import "./components/plugin-overrides/ngx-quill"; @import "./components/plugin-overrides/perfect-scrollbar"; @import "./components/plugin-overrides/simplemde"; @import "./components/plugin-overrides/sweet-alert"; @import "./components/plugin-overrides/dropzone"; @import "./components/plugin-overrides/angular-archwizard"; @import "./components/plugin-overrides/apex-charts"; @import "./components/plugin-overrides/data-tables"; @import "./components/plugin-overrides/ngx-datatable";

// Custom scss @import "./custom";`

please any one help me that would be grate

also package.json file like below

{ "name": "webadmin-angular", "version": "2.0.1", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "build-qa": "ng build --configuration qa", "build-uat": "ng build --configuration uat", "build-prod": "ng build --configuration production", "prod-build": "ng build --prod", "watch": "ng build --watch --configuration development", "test": "ng test", "rtl": "webpack --config webpack-rtl.config.js" }, "private": true, "dependencies": { "@agm/core": "^3.0.0-beta.0", "@angular/animations": "^14.2.3", "@angular/cdk": "^14.2.4", "@angular/common": "^14.2.3", "@angular/compiler": "^14.2.3", "@angular/core": "^14.2.3", "@angular/forms": "^14.2.3", "@angular/localize": "^14.2.3", "@angular/material": "^14.2.4", "@angular/platform-browser": "^14.2.3", "@angular/platform-browser-dynamic": "^14.2.3", "@angular/router": "^14.2.3", "@mdi/font": "^6.6.96", "@ng-bootstrap/ng-bootstrap": "^13.0.0", "@ng-select/ng-select": "^8.1.1", "@popperjs/core": "^2.11.6", "@sweetalert2/ngx-sweetalert2": "^11.0.0", "@swimlane/ngx-datatable": "^20.0.0", "angular2-image-gallery": "^14.0.3", "animate.css": "^4.1.1", "apexcharts": "^3.35.0", "axios": "^0.27.2", "bootstrap": "^5.1.3", "buffer": "^6.0.3", "chart.js": "^3.7.1", "dropzone": "5.9.3", "feather-icons": "^4.29.0", "hammerjs": "^2.0.8", "lightgallery": "^2.7.0", "lodash": "^4.17.21", "metismenujs": "^1.3.1", "ng-apexcharts": "^1.7.1", "ng-otp-input": "^1.8.5", "ng2-charts": "^3.0.9", "ngx-clipboard": "^15.1.0", "ngx-dropzone": "^3.1.0", "ngx-dropzone-wrapper": "^10.0.1", "ngx-highlightjs": "^6.1.2", "ngx-image-viewer": "^1.0.13", "ngx-json-viewer": "^3.2.1", "ngx-mask": "^13.1.10", "ngx-perfect-scrollbar": "^10.1.1", "ngx-quill": "^16.2.0", "quill": "^1.3.7", "quill-delta-to-html": "^0.12.1", "rxjs": "~7.5.0", "simple-datatables": "^3.2.0", "sweetalert2": "^11.4.8", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^14.2.3", "@angular/cli": "^14.2.3", "@angular/compiler-cli": "^14.2.3", "@types/feather-icons": "^4.7.0", "@types/googlemaps": "3.39.12", "@types/jasmine": "~3.10.0", "@types/lodash": "^4.14.194", "@types/node": "^12.11.1", "@types/quill": "^1.3.10", "@types/simple-datatables": "^3.2.0", "admin-lte": "^3.0.5", "agm-direction": "^0.8.10", "angular-google-maps-geocoder": "^0.0.4", "jasmine-core": "~4.0.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.1.0", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.7.0", "typescript": "~4.6.2", "webpack-cli": "^4.9.2", "webpack-messages": "^2.0.4", "webpack-rtl-plugin": "^2.0.0" } }

Reproduction

StackBlitz link: Steps to reproduce:

Expected Behavior

there is no error when running

Actual Behavior

Environment

Angular:
CDK/Material:
Browser(s):
Operating System (e.g. Windows, macOS, Ubuntu):

crisbeto commented 1 year ago

Closing since Bootstrap isn't in this repository.

angular-automatic-lock-bot[bot] commented 12 months ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular / components