What is the difference between importing styles in angular.json and importing in styles.css?
Importing in angular.json
Importing in styles.css
Hope to have explained my question well. Thanks in advance.
The styles array inside of the angular.json file is used to declare global styles for a project (styles.css being one).
If you import all of your other stylesheets into styles.css (and styles.css is specified in the styles array in angular.json), you'll end up with one global, composite stylesheet.
If you put all of your stylesheets into the angular.json styles array independently (rather than importing them into styles.css), you'll end up with multiple global stylesheets.
In angular.json
The styles.css file allows users to add global styles and supports CSS imports.
You can add more global styles via the styles option inside your project's build target options in angular.json. These will be loaded exactly as if you had added them in a <link> tag inside index.html.
Importing css files in styles.css enable you divide your css code into separate files for the sake of organize code
for more information about global styles, follow this link
Related
Global CSS variables
I have multiple CSS files in my project
I don't want to set the variables in each CSS file, but I would like to access them from every file.
You can import another CSS file from a CSS using:
#import "path/variables.css";
MSDN Documentation
You just need to create a globals.css file in there somewhere. Add your CSS Variables. #import that file into the others where needed.
I have a global CSS file that contains all generic CSS.
I want to be able to extend all the classes present in this global CSS file in any of my SCSS files.
Right now it throws an error .xyz class does not exist and build fails. I tried importing this file but still build fails.
Adding !options next to class is one way for the build to pass but is there any other better way?
Bit more context for Vue users. I use VueCli3. I use <style lang="scss"> for writing SCSS and want to use extend here. Vue documentation suggesting adding prependData for adding variables. I imported the global CSS in a SCSS file and imported that file in the prependData but Vue build still fails.
It sounds like you want to globally include a CSS file with content that the SCSS blocks in each component can read. (Variables, style definitions, etc).
#extend works like a variable, meaning SCSS needs the definition style to be available as part of its compilation. So that means getting "SCSS Global Variables" working should solve your Extend problem too.
In that case, you need to tweak how Webpack deals with your components. You can do it manually as described here. Or my preference is to use a Vue Cli plugin called vue-cli-plugin-sass-resources-loader. Make sure that your component <style> section contains lang="SCSS" though I assume you're already doing that.
Using #import CSS file into SCSS file not possible to #extend any class.
But you can follow below steps for extends class from your pure css code.
Convert .css file into .scss.
import that global.scss file into another .scss file.
Then after you can use #extend for extend class in new file.
If your file have more then 1k line of code then it will get trouble for extend class.
i created two css file in my react app login.css and main.css then require login.css in login.jsx and main.css require for an other files but css writed in login.css affect to an other components. also With a little focus i find all css file loaded in header generally for all component
CSS imported inside a component it's not scoped by its own. If your CSS have a general rule it will influence the whole page.
Importing CSS inside a component is great because you will automatically remove it if you delete the component and, in case your component is loaded asynchronously with a chunk it can be imported later. That's depends on webpack settings.
I am using the latest Angular(4) with Angular CLI. I followed the advice found on SO for setting up global scss that is available to components.
Angular-CLI global scss vairables
My structure looks like this
/
styles.scss
/styles
variables.scss
mixins.scss
common.scss
/app
/component1
component1.scss
/component2
component2.scss
The main styles.scss file has the following code
#import './styles/variables.scss';
#import './styles/mixins.scss';
#import './styles/common.scss';
And in my components, I start each component scss file with the statement of
#import '~styles.scss';
I thought that this was the correct way to bring global variables/mixins/common into my component's scss. However, when I started to have components within components, I began to notice that Webpack was actually creating one block per component in the page, and each one of them had all of the global scss written out in them. So there would be one block for component1, with ALL of the variables,mixins,common stuff at the top, and then another block right below that one for the other component2 in the page, with all that information again.
Besides this being extremely inefficient, it means that the global styles are overwritting themselves (can see that in chrome debug) once for each time they are loaded.
Some direction would be very much appreciated.
The <style> tags are normal angular behaviour. Each components SCSS gets written into a <style> element, so there is nothing wrong with that.
The style.scss is for global styles that do not need encapsulation. It also gets written into a <style> element, if you imported it in your angular.json:
"styles": [
"styles.css"
],
What you are getting wrong is the question you linked (which is still not accepted).
You shouldn't import your already imported styles.scss (apart from variables or mixins) into your components, because this will lead to increasing bundle sizes, as you import the code over and over (which is also the reason for the GitHub issue you mentioned).
You can use the mixins, variables and common.scss simply by including them directly in your components SCSS, just as you need them.
This is basic sass behaviour, you should never import things that result in css several times (sass files imported into component should typically only contain variables, mixins and functions). If you need your import to happen only once, add it to the default styles file.
Look here
I downloaded a free HTML theme named dashgum from the internet. I'm implementing it for an Angular2 application using angular-cli. I converted the css files to .scss and pasted the code to the angular application. I then imported the files in the global styles file named styles.scss to apply the styles to the application like this:
#import url('./scss/bootstrap.scss');
#import url('./scss/font-awesome/css/font-awesome.scss');
#import url('./scss/zabuto_calender.scss');
#import url('./scss/gritter/css/jquery.gritter.scss');
#import url('./scss/lineicons/style.scss');
#import url('./scss/style.scss');
#import url('./scss/style-responsive.scss');
The problem that I'm facing during debugging is that all the styles appear as embedded styles in the browser like this (notice the style tag):
I want the style to appear as external styles while inspecting like in the theme. Please notice it in the following screenshot:
These are the default settings in Angular 2 as I made no apparent changes for the styles to appear embedded when inspecting. Is there any known way to change the settings in Angular 2 for the styles to appear as external styles when inspecting? The embedded styles make it harder for me to debug. Any help pointing out towards the solution would be appreciated.
My first advice (like official Angular CLI documentation says) is to put your global library inside .angular-cli.json like this:
...
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"styles.scss"
],
...
Then just run the app with the --extract-css parameter to see in the browser inspector the source files:
ng serve --extract-css
And you will have this:
I have learned that the styles imported in the global styles.scss file always appears embedded when inspecting in the browser. If we want the css to appear as external styles, we will have to use it in components.
Edit:
See toioski's answer above.