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.
Related
Is There any difference to import to an Angular project a CSS lib (eg bootstrap) considering the options below:
Angular.json (npm)
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
Angular.json (CSS file locally)
"styles": [
"assets/lib/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
styles.scss (CSS file locally)
#import "assets/lib/bootstrap/css/bootstrap.min.css";
I suggest the first solution, because:
All three will end up in main CSS bundle
But 2. and 3. will also have original bootstrap inside assets. Even though it's used in bundle, it won't be removed from assets - which are a part of a build as it is.
Also, if you update Bootstrap it's way easier doing so by NPM.
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 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"
]
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?
I would like to add some custom CSS on my angular-cli.json file, but I can't find a solution about it. I tried to use something like that:
"styles": [
"styles.css",
"http://site.test/mycss.css"
],
But it's not working. Someone can say if there is a solution?
What you can do is use sass instead of pure css
"styles": [
"styles.scss"
]
in the style.scss, use the #import from sass and let the sass handle it
#import "../node_modules/font-awesome/css/font-awesome.css";
Note: I think you can use an 'http' address