I recently upgraded a legacy app to Angular 13, however, I noticed certain stylesheets were not being correctly added to my compiled styles.css.
This worked fine on Angular 12 where is still used a webpack under 5 and node-sass, I suspect this is what is causing this behaviour.
I have package.json dependencies like:
"@angular/animations": "^13.3.12",
"@angular/cdk": "^13.3.9",
"@angular/common": "^13.3.12",
"@angular/compiler": "^13.3.12",
"@angular/core": "^13.3.12",
"@angular/forms": "^13.3.12",
"@angular/localize": "^13.3.12",
"@angular/material": "^13.3.9",
"@angular/platform-browser": "^13.3.12",
"@angular/platform-browser-dynamic": "^13.3.12",
"@angular/router": "^13.3.12",
I have CSS files like this:
styles.scss
.d {
@import "src/assets/scss/dashboard";
}
dashboard.scss
@import "~bootstrap/scss/bootstrap";
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
@import '~@fullcalendar/list/main.css';
@import '~@fullcalendar/bootstrap/main.css';
@import '~@syncfusion/ej2-base/styles/material.css';
@import '~@syncfusion/ej2-buttons/styles/material.css';
@import '~@syncfusion/ej2-inputs/styles/material.css';
@import '~@syncfusion/ej2-popups/styles/material.css';
@import '~@syncfusion/ej2-lists/styles/material.css';
@import '~@syncfusion/ej2-splitbuttons/styles/material.css';
@import '~@syncfusion/ej2-calendars/styles/material.css';
@import '~@syncfusion/ej2-angular-calendars/styles/material.css';
Now, bootstrap works fine and comes out in the compiled CSS, however, this is how the fullcalendar and syncfusion code looks:
.d {
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";
@import "~@fullcalendar/list/main.css";
@import "~@fullcalendar/bootstrap/main.css";
/* minicalender */
@import "~@syncfusion/ej2-base/styles/material.css";
@import "~@syncfusion/ej2-buttons/styles/material.css";
@import "~@syncfusion/ej2-inputs/styles/material.css";
@import "~@syncfusion/ej2-popups/styles/material.css";
@import "~@syncfusion/ej2-lists/styles/material.css";
@import "~@syncfusion/ej2-splitbuttons/styles/material.css";
@import "~@syncfusion/ej2-calendars/styles/material.css";
@import "~@syncfusion/ej2-angular-calendars/styles/material.css";
/* Custom styles for rich text editor */
/* .main-content{
padding: 70px 0 0 0;
} */
/*h1, h2, h3, h4, h5, h6 {*/
/*color: #2b2b2b;*/
/*font-family: Poppins, sans-serif;*/
/*margin: 10px 0;*/
/*font-weight: 300*/
/*}*/
/*h1 {*/
/*line-height: 48px;*/
/*font-size: 36px*/
/*}*/
/*h2 {*/
/*line-height: 36px;*/
/*font-size: 24px*/
/*}*/
/*h3 {*/
/*line-height: 30px;*/
/*font-size: 21px*/
/*}*/
/*h4 {*/
/*line-height: 22px;*/
/*font-size: 18px*/
/*}*/
/*h5 {*/
/*font-size: 16px;*/
/*font-size: 14px*/
/*}*/
/*.container-fluid {*/
/*padding-left: 25px;*/
/*padding-right: 25px;*/
/*padding-bottom: 15px*/
/*}*/
/*.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {*/
/*padding-left: 7.5px;*/
/*padding-right: 7.5px*/
/*}*/
/*.row {*/
/*margin-right: -7.5px;*/
/*margin-left: -7.5px*/
/*}*/
/*#page-wrapper {*/
/*padding: 73px 0 60px;*/
/*overflow: hidden;*/
/*}*/
/*body{*/
/*background: #edf1f5*/
/*}*/
/*.tab-content {*/
/*margin-top: 30px*/
/*}*/
/*.sidebar {*/
/*overflow-y: auto*/
/*}*/
/*.sidebar .sidebar-nav.navbar-collapse {*/
/*padding-left: 0;*/
/*padding-right: 0*/
/*}*/
/*.sidebar .fa-fw {*/
/*width: 20px;*/
/*text-align: left!important;*/
/*display: inline-block;*/
/*font-size: 16px;*/
/*vertical-align: middle*/
/*}*/
/*.sidebar .label {*/
/*font-size: 10px;*/
/*border-radius: 60px;*/
/*padding: 6px 8px;*/
/*min-width: 30px;*/
/*height: 20px*/
/*}*/
/*.sidebar #side-menu .user-pro a {*/
/*padding-left: 20px*/
/*}*/
/*.sidebar #side-menu .user-pro .nav-second-level a:hover {*/
/*color: #ff6849*/
/*}*/
/*.sidebar #side-menu .user-pro .arrow {*/
/*top: 23px;*/
/*right: 20px*/
/*}*/
/*.sidebar #side-menu .user-pro>a {*/
/*padding: 17px 7px 16px 15px!important*/
/*}*/
/*.sidebar #side-menu .user-pro .img-circle {*/
/*width: 30px;*/
/*margin-right: 10px*/
/*}*/
/*.sidebar #side-menu .user-pro .nav-second-level li i {*/
/*margin-right: 5px*/
/*}*/
/*.sidebar .sidebar-search {*/
/*padding: 15px*/
/*}*/
/*.sidebar .arrow {*/
/*position: absolute;*/
/*right: 15px;*/
/*top: 18px*/
/*}*/
/*.sidebar .nav-second-level .arrow {*/
/*top: 12px*/
/*}*/
/*.sidebar .fa.arrow:before {*/
/*content: "\f105"*/
/*}*/
/*.sidebar .active>a>span>.fa.arrow:before {*/
/*content: "\f107"*/
/*}*/
/*.sidebar .nav-second-level li, .sidebar .nav-third-level li {*/
/*border-bottom: none!important*/
/*}*/
/*.sidebar .nav-second-level li a {*/
/*padding-left: 43px*/
/*}*/
/*.sidebar .nav-third-level li a {*/
/*padding-left: 52px*/
/*}*/
/*!
* Weather Icons 2.0
* Updated August 1, 2015
* Weather themed icons for Bootstrap
* Author - Erik Flowers - [email protected]
* Email: [email protected]
* Twitter: http://twitter.com/Erik_UX
* ------------------------------------------------------------------------------
* Maintained at http://erikflowers.github.io/weather-icons
*
* License
* ------------------------------------------------------------------------------
* - Font licensed under SIL OFL 1.1 -
* http://scripts.sil.org/OFL
* - CSS, SCSS and LESS are licensed under MIT License -
* http://opensource.org/licenses/mit-license.html
* - Documentation licensed under CC BY 3.0 -
* http://creativecommons.org/licenses/by/3.0/
* - Inspired by and works great as a companion with Font Awesome
* "Font Awesome by Dave Gandy - http://fontawesome.io"
*/
/* .sidebar .sidebar-nav.navbar-collapse{
display: none;
} */
/*.tab-content { background:#f1f2f4; padding:30px 45px; margin:0 0 0 0; display: inline-block; width:100%;}*/
/* Firefox < 16 */
/* Safari, Chrome and Opera > 12.1 */
/* Internet Explorer */
/* Opera < 12.1 */
/* css loader */
/* Safari */
/* loader finish */
/* Share overlay */
/* selected tooltip */
}
I pasted raw here in case someone might have a clue by how it is structured.
I tied putting it at the very top of the file to reduce chance it is being mistaken as a comment or something.
I am at a bit of a loss as to what is causing this and have been unable to find inroads into debugging the behaviour.
I thought maybe it was the difference between ' and " but replacing ' with " results in same content.
It all works if I take dashboard.scss content and put it outside of .d{} rule in styles.scss which is what's confusing me. It only happens inside of the class.
So if I make my styles.scss this:
@import "~bootstrap/scss/bootstrap";
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
@import '~@fullcalendar/list/main.css';
@import '~@fullcalendar/bootstrap/main.css';
@import '~@syncfusion/ej2-base/styles/material.css';
@import '~@syncfusion/ej2-buttons/styles/material.css';
@import '~@syncfusion/ej2-inputs/styles/material.css';
@import '~@syncfusion/ej2-popups/styles/material.css';
@import '~@syncfusion/ej2-lists/styles/material.css';
@import '~@syncfusion/ej2-splitbuttons/styles/material.css';
@import '~@syncfusion/ej2-calendars/styles/material.css';
@import '~@syncfusion/ej2-angular-calendars/styles/material.css';
.d {
}
It works, but if I make it:
.d {
@import "~bootstrap/scss/bootstrap";
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
@import '~@fullcalendar/list/main.css';
@import '~@fullcalendar/bootstrap/main.css';
@import '~@syncfusion/ej2-base/styles/material.css';
@import '~@syncfusion/ej2-buttons/styles/material.css';
@import '~@syncfusion/ej2-inputs/styles/material.css';
@import '~@syncfusion/ej2-popups/styles/material.css';
@import '~@syncfusion/ej2-lists/styles/material.css';
@import '~@syncfusion/ej2-splitbuttons/styles/material.css';
@import '~@syncfusion/ej2-calendars/styles/material.css';
@import '~@syncfusion/ej2-angular-calendars/styles/material.css';
}
It doesn't.
It seems nesting it causes issues.
Anyone seen this before and have any idea what it is?
CodePudding user response：
The docs for import mention explicitly not including the 'css' extension when using import due to css also having the keyword of import and needing to handle that differently.
The only rule is that the import must not explicitly include the .css extension, because that’s used to indicate a plain CSS @import.
Because @import is also defined in CSS, Sass needs a way of compiling plain CSS @imports without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any @imports with the following characteristics to plain CSS imports:
- Imports where the URL ends with .css.
- Imports where the URL begins http:// or https://.
- Imports where the URL is written as a url().
- Imports that have media queries.
In other words, you need to remove that extension from each line in order to get the file import to work the way you want it to.