I'm doing some UI dev in an Angular 2 (v4) project and currently have to re-run ng serve... to recompile the new styles, in order to get them to display in the app.
Is there a way to get the CSS styles to auto-compile in the same way adding html tags to a given component updates the app realtime?
It should automatically do that while serving.
Please provide more details.
Try disabling Use "safe write" in Settings of your IDE if that's a thing. It might cause that problem incidentally ( Settings | Appearance & Behavior | System Settings in Jetbrains problems)
Change Angular CLI version?
Check out your .angular-cli.json could be something in there.
There is two ways to add css file to your project:
one way add the css file to assets folderthen import the file from style.css like this
#import url('./assets/theme.css');
in this case the file will be watch to change
another way from angular.json add the css file to styles array
"styles": [
"src/assets/theme.css",
"src/styles.css"
],
notes that any change on angular.json file required to run angular server againg
{{ 'Happy Coding' }}
Related
I'm still new with web development. Right now, just new with angular. How can I change from SCSS to CSS stylesheet cause I accidently select SCSS style when I create a new angular project.
One more thing, how can I change terminal bar in VS Code from to . I tried to Google but can't find the answer.
Configuring Your Default Angular Component Extension
To have Angular default to generating components with CSS files and not SCSS files, simply edit your configuration. Keep in mind you can still use CSS syntax inside SCSS files.
ng config schematics.#schematics/angular:component.styleext css
You can also do this process by hand by editing your angular.json file
VS Code Terminal Tabs
Open your VS Code settings and search for terminal.integrated.tabs.enabled and check the option named Terminal > Integrated > Tabs.
How to include the custom scss files we download from Syncfusion Theme Studio into angular cli?
The site recommends adding the URL to the styles section in angular.json. Is there a way to avoid doing that and import it into styles.scss.
I have tried by adding:
#import './scss/themestudio/multiselect-bootstrap4-202104281445211345-8b09079-/bootstrap4.scss';
It doesn't work.
You could just copy/paste the new css or scss content directly into your existing styles.scss file
We have created sample for your reference that you can get from the following link.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-sync-343293087
We request you to just include the downloaded SCSS file from Theme Studio and copy the file into the application repo. Also, need to modify our “angular.json” as in following code snippet.
"styles": [
"src/styles.scss",
"src/style/material.scss"
],
Please get back to us if you have any queries.
So, I've made a migration of a Angular 5 project to Angular 6 (well, more like I did a mix with a regular migration and a new project re-using the files because of a bunch of problems). The project compiles and works nicely as it should.
Bu the Angular 5 version used sass instead of the regular css. That shouldn't be a problem: I did the following updates to allow Angular 6 to work with the scss files.
schematics in angular.json is set with "#schematics/angular:component": { "styleext": "scss" }
stylein angular.jsonis set with "styles": [ "src/styles.scss" ]
All the css files have a scss extension.
All the component have a scss declared instead of the css.
Well... That didn't work. My pages are rendered without style whereas the files seem to be correctly loaded. Did I miss something?
(Angular version is 6.1.10, CLI is 6.0.8)
Update 2
The console does not write anything related to a missing file or else.
The styled elements don't have their style.
In the DevTools the styles are not the sources tab, but they also aren't in it in the Angular 5 version (though they are in the Style Editor tab in Firefox).
You forgot to compile the scss files.
do npm install -g sass
then run sass styles.scss
which will turn/compile scss files to css one.
You cannot link a direct scss files to render styles, it must be compiled first to css.
Problem solved: there were missing dependencies in style and scripts in angular.json.
I have created the angular project in VS Code using the following command.
ng new my-app --style=scss
by following this github link
Now every style sheet that is being created using angular-cli is with extension of .scss instead of .css
Now there is a requirement to check that how Sass is being converted to css because I am new to Sass. I am facing some issues in designing thus it would be nice for me to look at css file.
I have searched in those folder where scss file exists but there I couldn't find css file. Please help
Update
Look at this picture, when I created the component using cli, it created .scss instead of css so I need to look for css file.
I've been able to find a way to view my compiled .scss files as a .css file.
Before I only saw the raw .scss files when inspecting from Chrome.
The trick was setting some flags in the angular.json file so it will tell webpack (what angular-cli uses to build the app) that I want the .scss files served as .css along with a sourcemap of the file:
./angular.json
{
...
"projects": {
"my-prject": { <-- or whatever your project is named
"architect": {
"configurations": {
"production": { // <-- production is default, you might be working w/ custom configurations [development, test, w/e]
...
"sourceMap": true, <-- will serve source maps w/ the file so you can view it in the browser easily
"extractCss": true, <-- actually serve the .css files and not the .scss files
...
}
}
}
}
}
}
Once that is updated, restart the dev server or rebuild your application
then you can go into chrome dev tools and look at find the styles.css file (or whatever you have the file name set to) and view it:
If you are working on local then:
local {
"sourceMap": true,
...
}
Sass in Angular 2 are always converted into Css in run time when you compile and build the project. However if you are using any other environment like Gulp tasks and watches, you can run 'sass --watch input.scss output.css'
As folks have already mentioned, the css is built at runtime. You can still set the result using inspect in chrome or firefox.
It's definitely a requirement to check the generated CSS when you find something wrong and Chrome Inspector can't help! So this is definitely a good question, which is why I'm here.
To summarize, #y_vyshnevska is right that "you may find your css inlined in script tags at the end of head", and he also gave an in-depth link: https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975 on the topic. I put it here in case you neglect it.
It looks not possible to view compiled css files at a runtime.
However, you can do the following trick: angular applies components' styles using <style> attribute. Find the one you need in elements inspector (you can search there using ctrl (or cmd) + f.
After you've found the stylesheet you need, you'll see it's truncated. To see the entire content, click on the style element and select "Store as global variable". After that in console run
copy(Object.values(temp1.sheet.cssRules).map(r => r.cssText).join('\n'))
This will copy all css to your buffer
it looks like everything in the clientapp folder is compiled into javascript and bundled into main-client.js using webpack, probably. i don't know much about it.
what i'm wondering is, if i have some javascript and css that isn't strictly part of the angular app, where in the project do i add these dependencies. do i add it in the dist folder? it looks like that folder is dynamically created by webpack so i didn't want to do that.
for example, the default angular app it installs clearly uses bootstrap for css grid system classes, so bootstrap must be installed somewhere. is it in the webpack config? how would i go about adding any other third party assets or my own?
thanks for any clarity about using this template
According to this blog by Steve Sanderson, who is apparently the author of this template you are referring to, the intended order of operations to add third party node modules is:
Add the module to your package.json file, save and then restore npm packages,
Add the item to the vendor array in webpack.config.vendor.js (which is the same as adding the item to the nonTreeShakableModules in the same file as Mike_G mentioned),
Run webpack --config webpack.config.vendor.js to repack your new assets. Make sure to install webpack with npm before this step.
It may be worth mentioning that Steve says that in step number 2, if what is being added is a css asset, the full path within node_modules and extension are needed, i.e. font-awesome/css/font-awesome.css, but if you are only including a Javascript library, then just the name of library will suffice, i.e. moment for Moment.js.
Well since webpack is being used, there is no way of adding any JS or CSS code inside that budnle.js file.
You would have to create you code before the packaging is being run.
The other way is to create your files and import them manually in t he index.html file.
This is ad hock way of doing stuff, but only in case that you need to add some CSS code to your project and not having knowledge of angular/webpack stuff.
As for JS code, its nearly impossible to add anything like that, since html code is also compiled and sent into bundle.js.
You can use two ways:
1) use angular/cli. In .angular-cli.json you can find:
"styles": [
"styles.css"
],
"scripts": [],
here you can add any custom css or js file.
2) work with static files:
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files
in this second way you can set a specific folder, add any custom file css or js and link to it from _layout.cshtml file.
hope this help u