edit:
there is below code bottom of style.css:
/*# sourceMappingURL=style.css.map */
also there is a style.css map file.I added its code:
https://www.codepile.net/pile/azGno8Qb
I dont know anything about sass.I have a html file which made sass.I want to change its styles.However when I click the element on chrome, below link seems instead of css file on developer window:
/sass/project-sass/_header.scss : HTTP status code: 404
So, which css file is refered by _header.scss?
I need to change the element.
Also I included all css files but when I include a code snippet from this html file to wordpress, necessary properties doesnt load also there is no _header.scss on chrome developer window.
How can I include the sass stuff on wordpress?
It's difficult to answer your question because you don't provide the architecture of your document and code. However :
_header.scss seems to refer to a "sub" style and it could be look like in the main style :
#import url("_header.scss");
But you can't put a scss file in HTML. You must compile it before and it will result a CSS file for example :
sass _header.scss header.css
and in your HTML :
<link rel="stylesheet" href="path/to/your/header.css">
Related
I use a link in my html. How i can copy code of this file to edit it?
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
Do you really want to edit a minified file?
It can be done but it's difficult.
Instead, put that whole address minus the .min in your browser's address field
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css
and you should see the code unminified which you can then copy/save to your local system for editing. (on Windows this would be by right clicking the mouse/pad).
I am not sure whether you do want to actually edit this file, or whether you want to change some of its effects. If the latter you link to the file then put your own CSS in style element following and it will overwrite with whatever settings you have given.
You have to add your custom css style after it so it will overrite it.
In main html file you can just add styles right after <head> for example:
<head>
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: red;
}
</style>
So what happens now it imports bootstrap styles but after that overrides it so you can add your custom styles inside <style>
You can simply open the url - https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
and save (ctrl+s) the file locally in your project and include the css file path with the help of this tag given below :-
You can also use custom css and then overide the css.
(Note :- Format the document/css file then you can edit the document)
For background, I am trying to load SVG icons in my react app and am using the object tag so that I can manipulate the color of the icons easily.
In this guide, they say:
If you want to use external styles, which are mostly much easier to work with and maintain, you can’t use or background-image. If you are using you need to reference your stylesheet internally from the SVG file (see code following). Remember: if you do this the SVG will also not be able to know what its parent class is (i.e. the ) so don’t try to use that in its styling. Inline SVGs don’t need this added and therefore can be slightly easier to work with in this sense.
and provide this code example:
// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>
// In style.css
.firstb { fill: yellow; }
.secondb { fill: red; }
To give you an idea of how my files are organized, my src folder contains an assets folder along with my components folder. My style.scss file lives within the src folder as well.
I'm having trouble figuring out what to add to the top of my svg files. My understanding of sass is that it would usually compile style.scss to style.css, however, when I look at my sources in dev tools it shows that style.scss is being loaded directly. Is this just because I'm still in development mode?
Anyways, I've tried the following (none of which have worked):
<?xml-stylesheet type="text/css" href="./style.scss"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<?xml-stylesheet type="text/css" href="style.scss"?>
It would be a huge help if anyone knows how I can get this to work! Let me know if there's any other information I can provide. Thanks so much!
You are correct to assume that you'd need to compile style.scss to style.css, so first ensure that only the CSS is being referenced in the SVG. This is the most straightforward way to get this to work, but a better solution would be to import your styles once in your root HTML template instead.
Now, if you're using React it's likely that you're also using a bundler such as webpack. You can tell bundlers like webpack to handle non-JS imports such as Sass files by using loaders. There is a sass-loader for webpack that will allow you to import Sass files, however you may also need to add the svg-inline-loader so that you can import the SVG directly.
I think with both loaders, what will happen is that webpack will start bundling your React app, see that an SVG is imported, grab it and see that it is referencing a Sass file, grab the sass file and compile it, and then output the styles in your index.html file. Please let me know if this solution works for you!
I found a workaround. Not exactly what I was hoping for, but it works for me.
There's a react-svg package that handles an ajax request and pulls the svg in as a normal svg tag. This allows me to edit with my sass file.
https://www.npmjs.com/package/react-svg
I would like to analyse the amount of unused CSS on my webpage. This web page is written in Angular 7 and the css is being added in the angular.json build configuration.
This seems to be appending the css to the head of the html file; in the developer tools I can see several style tags.
I have read in many places that I should use the coverage tab of the developers tools in Google Chrome to do this. For me this is working for JS but not for CSS.
Here are screenshots of what I am seeing:
It is all JS. If I filter for files that conatin css it returns no results
But I can see that css files have been downloaded here.
How can I analyse the code coverage styles in the head of the document?
The head of my document looks like this:
p.s. I am using Chrome Version 75.0.3770.80 (Official Build) (64-bit)
So all your CSS is internal it seems (they're not being served from a file, are bundled in the HTML).
Do a small test: put the CSS content of one of the <style> tags in a .css file (for instance, test.css) and include those files in <head> with <link rel="stylesheet" href="test.css">, and see if they work, and show up in coverage.
(and remove the corresponding <style> tag from original)
EDIT
If you don't filter by keyword CSS, you will see that there is a single row with type CSS+JS or JS, which DOESN'T show when you filter by keyword CSS.
Since your styles are all bundled in the HTML, they all clobber up to this row!
For instance:
Your address would be the root URL of the application.
EDIT
https://codepen.io/nilo-c-sar-teixeira/full/KLjbZW
You were right regarding dynamic CSS, it just isn't covered in the tab. The above link puts a <style> tag via javascript and the rules never show in any rows of the coverage tab. Good job :)
I am experimenting with SASS and am trying to load a simple sytlesheet using scss in my sinatra application.
The route handler in main.rb is
get('/styles.css'){ scss :styles }
In the layout (using the slim view renderer), I am using the css file as:
link rel="stylesheet" href="/styles.css"
I've removed the stylesheet from public folder and created the styles.scss inside the views folder, but am unable to get the css file in the rendered page.
Solved the problem.
The main problem was that I had an error in the sass file which caused it to fail silently.
on searching for the generated css file at http://localhost:4567/styles.css, the error was reported. On a hover option, &:hover {
background: darken($background, 20%);
I had a $ in place of the '&' symbol.
I love working with Codepen and I'm trying to import a css file from Pastebin.
Here is a link to my external file hosted on Pastebin:
http://pastebin.com/raw.php?i=mj9dmzZw
and inside that file I link to my actual font files.
I'm not sure what I'm doing wrong. Could anyone point me in the right direction or let me know if this is even possible.
Here is the actual codepen. http://codepen.io/ryanjgill/pen/CLitH
Inside the CSS section I have commented out the styling that I'm trying to include with the external CSS file. If you uncomment the styling for the iconfonts, you will see icons in the column 'Type'.
I have tried linking the flie in the settings of the css section that is built into codepen. And using the "#include url('http://pastebin.com/raw.php?i=mj9dmzZw')" inside the css.
Well, on CodePen page, there is a small letter 'g' top-right of css input box.
You can import your .css there i think.
If you need some .css extension to your file for importation, just create a new file.css and #import your Pastebin css from within your new file.css