I created custom theme and I overrided Magento_catalog and css of parent from folder Magento_catalog in blank theme. now I want to change some css code like gallery.I use firebug in chrome to find path and line css of gallery,but it shows me style.css in pub folder.how can I find exactly path of css??
thanks!
http://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/css-overview.html
As far as I know, the fastest option to do this is to search for a style in .less files. Just keep in mind that less has a syntax, so most of the times, you can't search exactly same line as you see in firebug. Usually I search for some part of the style I see in DevTools.
You can also try the complex way and run a less compilation with sourcemap
Compile LESS files with source maps
Related
My scss code stopped working. I identified the problem - two css files: custom.css.css and custom.css.css.map. I'm not using bootstrap, just ror. How do I make ruby ignore them? Or shouldn't I? The layout looks exactly the same, the code is easier to read (but not neat enough for my liking).
.map files are called source maps and they are used by browsers to display css files. I guess you are using SASS or LESS as you having a .map file generated. You may need to enable source maps in browsers to display the styles correctly. I hope following urls might help you.
Sass source files in Google Chrome
Sass Source Maps + Chrome = Magic
I'm using Codekit to minify all my CSS via Sass. This works great but causes an issue when inspecting the code as everything appears on line 1! I use the lines as a quick way to find the code I'm looking for.
I use the Codekit plugin for Coda, which means every time I make a change to a .scss file and save, it just auto compiles the code.
I guess everyone will tell me not to compile the code until launch, in an ideal world that's great but there will ALWAYS be a need to inspect the code without once it's all been compiled.
Is there a way around this? Or is this a downside of compiled code? What processes do people go through to get to the minified code? How can I tell which .scss the change is in?
I could set it to be less compressed so it's not all on one line but I would then lose the benefits of compressing it.
These are the settings I have Codekit set to:
Codekit supports Source Maps, which will let Google Chrome show you the original code even after minification.
In your compilation settings, check the Create a source map box for SASS.
For more information, check out this Team Treehouse article (the article deals with JavaScript, but the same principle applies to CSS too) and the Codekit SASS documentation.
Is there any way to make JetBrains PhpStortm (v8) to navigate to the SASS file when I Ctrl+cilck on a CSS class/id in the HTML source, insted of the default (to the CSS file class/id) setting? It would be great, and I cant find a soloution. Thanks in advance!
It's not really supported:
https://youtrack.jetbrains.com/issue/WEB-6737
https://youtrack.jetbrains.com/issue/WEB-8190
Please star/vote/comment to get notified on progress.
Although I have to say that in LESS it's kind of works for simple classes/ids (not made from parts via & or multi-level ones): it asks to which declaration to go and offers me 2 files: file.css or file.less.
I found a half-solution!
If I link the scss file in the head, then I can select the SASS declaration. Yay! :D
<link href="/css/sass/main.scss">
Thats work for me.
For PhpStorm I solved this with:
In the project browser, right click on the .css file that you'd
like to ignore.
Go to "Override file type".
Select "Plain text".
Now when you command click a style it will navigate directly to the .scss file and NOT the .css file. The .css file will be read by the browser but ignored by PhpStorm.
I've been following two articles about how to start editing scss files on chrome canary (not livereload.com)
https://medium.com/#toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0
and this one
https://developer.chrome.com/devtools/docs/css-preprocessors
I added my workspace and the browser is actually reading my file like in the following:
And then when I click into sources i can modify the content like in this picture:
I can change the css here and it's fine and it's updating my scss file from Chrome to file.
The issue
When I go to the elements inspector (first tab on devTools) and I try to change anything on that. The styles.scss becomes automatically styles.css and then I am not able to modify anything on the elements inspector that will change my scss file.
Also when I change anything on my scss file (using sublime text 2). The browser is not reloading my css, so it's not working from file to Chrome.
Are this two thing a bug? Is it mean to work like that?
It is a bit hard to make the model-based editing (in the Elements panel) play well with source-mapped code, since different users may expect different behaviors (moreover, editing a variable-based property value in SASS may assume editing it directly or editing the variable value instead.) Thus, we have not decided on how this should work, and the CSS-SASS link is just broken at the moment of edit (since the CSS no longer corresponds to the SASS source it was generated from.)
Please star https://code.google.com/p/chromium/issues/detail?id=257778 and leave a comment saying what kind of behavior you expect.
I write a Meego App. But the CSS sytle not work normally. And I want to know how to get the CSS sytle works ? THX.
My Steps:
in .pro, add meegotouch lib
css file named style.css and I add a qrc file to reference the style.css
in Code, just load the css style.
MTheme::loadCSS(":/style/style.css");
at the first time, the style works, but it fail to change the style when I re-write some attributes in the CSS file.
And I have to re-name the css file(maybe style1.css) and re-add in the qrc file, it will get work.
Any solution or did I miss something??
It would help if you included more code.
The only thing that I can think of is the simple problem of not reloading the application (or at least re-running the method where you load the css file) after you change the css file.
But I still don't know what you're doing.