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?
Related
I have tried to set up some global Scss in my Gatsby application, but it looks like after doing this i am seeing some odd behaviour in dev tools:
You can see that my global styles are appearing and being overwritten multiple times.
It is a Gatsby app so i am using sass-loader and the default dart-sass.
Here is how i have configure my gatsby-config.js file to allow me to use these global styles based on this stackoverflow post: https://stackoverflow.com/a/65904094/12119984
module.exports = {
plugins: [
...
{
resolve: `gatsby-plugin-sass`,
options: {
additionalData: `#use 'main' as *;`,
//allow mixins, variables etc to be accessible globally
sassOptions: {
includePaths: [`${__dirname}/src/styles/sass`],
// data: `#import "main.scss";`,
},
},
}...
I the use #forward along with #extend to get it all working in my module.scss files. My folder structure looks like this:
My global styles are in base.scss and I import them into main.scss using #forward:
#forward "base";
#forward "layout";
#forward "components";
As an exmaple, here is my index.module.scss file where i then use these global styles:
.sectionHome {
...
h1 {
background-color: $color-secondary;
#extend .uMarginBottomLarge;
#extend .headingPrimary;
}
}
It seems like a reasonable approach to me to use some global styles but to extend them into local sccs module classes, so can anyone explain to why these global styles are being applied several times?
The #forward rule, according to the docs:
The #forward rule loads a Sass stylesheet and makes its mixins,
functions, and variables available when your stylesheet is loaded with
the #use rule. It makes it possible to organize Sass libraries across
many files, while allowing their users to load a single entrypoint
file.
So basically, each time you are requesting a CSS module in some component, you are importing all the nested extensions (#extend and #use). Moreover, because of React's component extensions, you may also nest styles when importing nested components (Button in Layout, Layout in a index.js, etc)
Global styles in CSS apply exactly in the same way as CSS "standard" files, as you can see in Gatsby's docs, extending its documentation, you will need to add the following in your gatsby-browser.js:
import "./src/styles/sass/main.scss"
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'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.
Whats the advantage of importing bootstrap.scss to styles.scss file over adding .angular.cli.json styles block.
which approach is good and why?
styles.scss
#import '~bootstrap/scss/bootstrap.scss';
vs
.angular-cli.json
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
I want to understand is there any benefits in build size ..etc. the styles required for page will load..so the bundle size will reduce etc..
If you're willing to custom Bootstrap (default padding, margin, colors, etc) then you could do it thanks to scss.
You could just override some values and you should be good to go.
If you import the css within angular-cli.json, you won't be able to do that (in a clean/proper) way. (but it's fine, maybe you don't need to!)
Now, if you don't want to customize Bootstrap, you should just put it in angular-cli.json with the css otherwise you'll be compiling all Bootstrap source code over and over which might be a waste of time if you don't need customization.
Styles files should be for user custom styles. Lib styles better to import in angular-cli.json
It makes code more maintainable and easier to understand
I'm compiling my SCSS with gulp-scss. My styles.scss file looks like this:
#import "node_modules/bulma/sass/utilities/initial-variables";
#import "node_modules/bulma/bulma";
#import 'src/styles/navigation';
The second line of this code imports Bulma, the source code for which can be found here. This file imports some utilities, including some mixins I need.
Unfortunately when I try to use those mixins in my navigation.scss file:
#include desktop {
.navbar {
min-height: 135px;
}
}
I get the following error:
Worth noting that if I #import the mixins and variables file in navigation.scss directly, it works fine. What's going on here?
The problem was with my file names. They were not preceeded by an underscore, which appears to be the convention for the compiler to work properly. So src/styles/navigation.scss became src/styles/_navigation.scss. The import remained the same:
#import 'src/styles/navigation';
I will assume you use gulp-sass.
What I usually do is creating a path in the gulp file for better reference and also for letting know gulp I will be using these node resources in .scss files.
In this case I'm calling foundation and compass mixins modules in the include paths.
This is a task in the Gulfile.js
gulp.task('styles', function () {
gulp.src('src/scss/application.scss')
.pipe(sass({
includePaths: [
'node_modules/foundation-sites/scss',
'node_modules/compass-mixins/lib'
],
outputStyle: 'compressed'
}).on('error', sass.logError))
.pipe(gulp.dest('./public/css/'))
});
Then in your main .scss or where you want to place the import for those files you can just simply add:
#import 'compass';
#import 'foundation';
#include foundation-everything;
Here I call the compass file inside this node module path I specified in the gulp file, and also the foundation.scss (which imports a lot of other scss files).
Then once foundation is availabe I initialize all the mixins.
So summing up:
Possible solutons:
1: Check if this gulpfile definition with include path solves you routes errors.
2: check if the modules you are importing don't have a trigger mixin to enable them, such as foundation has his "foundation-everything"
Hope this helps.