I have just started a angular-7 based web application with sass, when I import scss within "styles.scss" then it works perfectly throughout the application but when I am trying to add/override css within component(profile.component.scss) then it's not working.
Angular CLI: 7.1.4
Angular: 7.1.4
Node: 11.6.0
Here are "angular.json" css structure of the application ---
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
"src/styles.scss"
],
Here are "styles.scss" structure that added for the application ---
#import "assets/scss/custom-mixin";
#import "assets/scss/header";
#import "assets/scss/page";
#import "assets/scss/footer";
#import "assets/scss/login";
#import "assets/scss/profile";
#import "assets/scss/profile-edit";
#import "assets/scss/privacy";
#import "assets/scss/search";
#import "assets/scss/testimonial";
#import "assets/scss/public-profile";
#import "assets/scss/card-builder";
#import "assets/scss/rtl";
#import "assets/scss/responsive";
Please check the above described structure and let me know if you find any error/mistakes within this and provide me specific way to work both css for the application.
You need to tell the angular compiler where to look for your scss files.
Add this to your angular.json file above your "styles" property:
"stylePreprocessorOptions": {
"includePaths": [
"src/theming"
]
}
Now create a directory src/themeing and add whatever .scss files you want.
You can then #import 'mycustomstuff' where src/theming/mycustomstuff.scss exists.
Hope this helps! If you're still stuck please provide us with your component.ts file(s).
You have to add new CSS file and include below the styles.scss then you can override the CSS.
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
"src/styles.scss",
"src/custom.css"
]
Related
I just upgraded to Angular 15 with Bootstrap 5 and none of my utility classes are working (ex: mb-3, mt-5, etc...) when including bootstrap in my styles.scss like this.
#import 'bootstrap/scss/bootstrap.scss';
I know the classes have some breaking changes from 4-5 and I've updated them accordingly in my application.
I noticed when I include bootstrap in my angular.json file the utilities classes work fine.
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/bootstrap/scss/bootstrap.scss",
"src/styles"
]
},
But when I remove bootstrap from my angular.json file and only include it in my styles.scss file, like below, the utilities are missing from the build?
/* variable over rides */
#import "variables";
/* import bootstrap */
#import 'bootstrap/scss/bootstrap.scss';
/* custom css below */
To get the best of both worlds, I've included bootstrap for utilities in my angular.json file. Then also included bootstrap in my styles.scss file to over-ride the .scss variables, as needed. Ideally, I'd like to have utilities included in my #import of bootstrap in my styles.scss file and remove the angular.json include.
Any help with this would be great, I hate that I'm including bootstrap 2 times and I don't know what I'm missing.
I currently have a Angular project which I am looking to purge the css using purgecss.
I have got everything working but when I import node_modules it struggles as it cannot find the paths which are located in the node_modules folder.
I have the current app.scss file
#import "#fortawesome/fontawesome-pro/scss/fontawesome";
#import "#fortawesome/fontawesome-pro/scss/regular";
#import "./_buttons";
The buttons class is actually called _buttons.scss but for some reason the postcss does not pick this up so I have to define the _ although I know it can be imported without.
So that is the first issue which I would like to fix if possible but the second is that when importing font awesome, it finds the font awesome package but it cannot find the file variables after I looked into the package I can see that there is no relative path and it is just variables. As this is a package is there a way to mitigate this issue within webpack to stop this from happening and the build from failing?
Here is my webpack.config.js
const purgecss = require("#fullhuman/postcss-purgecss");
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: "postcss-loader",
options: {
modules: true,
importLoaders: 1,
ident: "postcss",
syntax: "postcss-scss",
plugins: () => [
require("postcss-import"),
require("autoprefixer"),
purgecss({
content: ["./**/*.html"],
whitelistPatterns: [/^cdk-|mat-/],
defaultExtractor: content =>
content.match(/[\w-/:]+(?<!:)/g) || []
})
]
}
}
]
}
};
I've tried setting importLoaders: 1 which didn't seem to make a difference at all.
How can I get postcss to run from the files root directory? Even without the ./ which is used in the fontawesome package and also the postcss recognising the scss file without having to explicit prefix everything with _
Edit (font awesome error):
fontawesome.scss
#import 'variables';
#import 'mixins';
#import 'core';
#import 'larger';
#import 'fixed-width';
#import 'list';
#import 'bordered-pulled';
#import 'animated';
#import 'rotated-flipped';
#import 'stacked';
#import 'icons';
#import 'screen-reader';
Error: Failed to find 'variables'
Well, maybe this could help you, in the webpack.config.js you should add, specifically in purgeCss -> content, the diferents paths.
content: [
"./node_modules/name_package/**/**/*.{css,scss}"
]
I had the same issue using NextJS in production.
After a day of wasting time, finally, i found the souloution. There is a postcss plugin to do it for us!
First, install it using npm as dev dependency:
npm i postcss-url -D
Now you must update your webpack.config.js to use postcss-url. Just add postcss-url directly after postcss-import
It worked for me, when I removed the
require("postcss-import") from the webpack.config.js file. It took me 1 day to resolve it. Found the explanation here: Webpack style-loader / css-loader: url() path resolution not working
I'm using Angular+2 with bootstrap 4.3.X and I want to re-style/re-theme the bootstrap scss.
I want to achieve this the best way with Angular.
I'm aware this may be done with scss only.
[scss only]
angular.json
"styles": [
"src/styles.scss"
],
styles.scss
$theme-colors: ( "primary": #f700ff );
#import '../node_modules/bootstrap/scss/bootstrap.scss';
...
But what i'm trying to achieve is below.
[Angular way]
angular.json
"styles": [
"src/styles.scss",
"node_modules/bootstrap/scss/bootstrap.scss"
],
styles.scss
$theme-colors: ( "primary": #f700ff );
...
But it does not seem to matter which order i enter in angular.json. The $theme-colors simply won't work.
The two options work very differently. [scss only] is slow, the whole bootstrap module needs to be re-compiled if any component is changed. While in [Angular way] it never re-compiles during debug, only during build process.
Also
[scss only] ng build --prod -> dist= 2,99MB
[Angular way] ng build --prod -> dist = 2,11MB
Please help providing what is missing to do it the [Angular way].
Thank you in advance!
You need to make a variables.scss file in which you declare theme-colors, add that to your
"stylePreprocessorOptions": {
"includePaths": [""]
},
in angular.json configurations
Then in styles.scss at the top declare #import 'variables.scss' then you can use the $theme-colors var in your stylesheets. in every stylesheet you need the variables you need to declare the import statement.
I want to include an external style from a module in node_modules. Which is considered better practice?
Add the stylesheet to Angular.json in the application's build: styles: [], e.g.
"build": {
"styles": [
...,
"node_modules/leaflet/dist/leaflet.css"
}
}
Import the stylesheet into the application's styles.scss file, e.g.
#import "~leaflet/dist/leaflet.css";
If I were using styles.css instead of styles.scss, the second wouldn't work. However, given that I'm using SASS, I'm wondering if the second is preferred because it keeps Angular.json cleaner.
Are the two functionally equivalent or is there an important distinction that makes one better than the other?
r.js optimiser can create multiple js modules as in
modules: [
{
name: "main",
exclude: [
"infrastructure"
]
},
{
name: "infrastructure"
}
],
Is there a way to create multiple css outputs?
Because one page needs set of css files and another page needs different set of css files.
r.js will automatically inline contents of #import url(...) links in all .css files found in the project directory. If you structure your CSS files correctly you can achieve modularisation, for example:
page1.css
#import url("common/shared.css");
#import url("page-1-specific.css");
page2.css
#import url("common/shared.css");
#import url("page-2-specific.css");
After running through r.js page1.css and page2.css will contain actual contents of the referenced files, i.e. contents of "shared.css" will be included in both of them.