I think it's weird that the default file icon theme shows that all Javascript files are React files now. Can that be changed without having to download a new theme?
I'm not even using React in this project.
Hope this solves your issue. In the bottom right side of your VSC tool, click on javascript react and it opens up a dropdown list, In that please select Javascript option. I have attached a screenshot of VSC code tool image for your reference.
Related
What is the most efficient way to style components in the browser dev tools with the default view encapsulation (emulated)?
My current workflow involves a lot of tedious copying and pasting from the dev tools like this:
Chrome dev tools has the ability to save styling changes made on the DOM to the source css file (Save Changes To Disk With Workspaces), but I don't know if this will work with the way Angular and Webpack use emulated component styles.
There's got to be a quicker workflow than what I am currently doing. Any tips?
You can directly edit your css project files from chrome devtools. Follow this steps:
In angular.json add "extractCss": true like so:
This way you'll see the css files in inspection instead of inner style tags in header
(you can see an example image in step 3 below).
Open chrome devtools, Sources tab, Filesystem left tab and add your project folder:
This is the magic trick, this will let you edit your local files from devtools!
now when you inspect your html for css, you can click the css file and you'll be redirected to your local file:
Edit your changes to the file.
Save the file.
Magic! Your local file was modified!
I LOVE Chrome!
Cheers
...I don't know if this will work with the way Angular and Webpack use emulated component styles.
TL;DR: You can't do this quite in the way you'd like to.
Angular scopes styles to components, and thus the .some-class-name[ngcontent-c5] notation in the Chrome inspector. As such, dev tools has no way of knowing exactly where to trace the change you made back to, other than the file it originated from using the source map.
As you mention in your question, you can load the project working directory into dev tools (article you posted) and edit the file itself. On save, the angular watcher will register the change and reload. This will work with pure css/js, as well as pre-compiler scss, ts, etc.
So to answer the question: yes, webpack will still recompile when you do that, but not quite in the way you're looking for.
Django REST framework uses Bootstrap and has its own CSS files in it. It seems like PyCharm imports those files for code completion popups. The things is, I don't want those as I use different CSS framework and in fact, it's confusing me because all those Bootstrap autocomplete popups when I'm trying to set CSS classes and so on.
So my question is, is there any way I can disable code completion popups from certain CSS files?
I did not face with this problem until now,but I think you should disable these folders is Pycharm, try this :
Settings|Directories -> Use Exclude button on folder
I'm trying to replicate the bootstrap button style without having to import the bootstrap CDN into my project. Is there an efficient way to do this?
Yes, you can. Open this page - https://getbootstrap.com/docs/3.3/customize/ and check/uncheck what you want
In your case you need to check
Common CSS - Buttons
Components - Buttons groups
Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.
Download the package here: https://v4-alpha.getbootstrap.com/getting-started/download/
Then open it and go into the SCSS directory. Look for _buttons.scss.
Open it, copy the styles, paste them into your CSS. You may have to hard code any SASS vars they use.
I'm a beginner coder and am trying to integrate my css into my app. Using Rails 4 + Bootstrap 3.
I wrote out the html + css for the front-end of my app prior and it all worked fabulously. I moved everything to my folder and edited my V + C accordingly.
I have installed the bootstrap-sass gem successfully. Have updated my assets application and js. I have a .scss file importing bootstrap and my Google fonts.
Bootstrap, Bootstrap js, and Google fonts are working selectively/randomly on certain pages, but not fully on a page or they just don't work at all or they are there but all messed up now. (ex. modal not working on one page, but js element on another page works) I am trying to call the css files from where they are locally stored.
My questions:
1. Is there something I would need to edit to integrate the two in addition to the above?
2. Do I have to transition my css into another file?
3. If there is no easy way to fix this, should I just start over with my css?
Would appreciate any tips. Thanks!
A good starting point would be to check your sources under the inspector, to make the that the css and javascript are both being required. Also check the console for whether there are any javascript errors.
Assuming you are on google chrome, and on a mac, that would be cmd+alt+i, and ctrl+alt+i on windows.
You can also check which files are being included through checking page source by right clicking most parts of the page.
If they are being required and styles are not being applied then something else is probably getting in the way( i.e. bootstrap javascript files are being required twice, css is being overwritten because of load order, etc)
i installed phonegap on xcode and i create a new project. I included jquery mobile in my project but when i start it on the simulator it's not load the css files. When i open the same code in a Browser then it loads the css files of jquery mobile.
Thank you in advance!
The only way I've found to counter this is to include the styles as a <style> tag in the header of all of your HTML pages for the app.
There must be a better way, but I've never gotten linked CSS files to work properly.