SOLVED: magically on restart public\css\style.css was picked up and rendered in web browser (no changes to project files was made)
download project files
I have followed Dancer2::Tutorial instruction and got it working.
OS: Windows 10
Perl: Strawberry perl v5.30.2
But I can not figure out where css/style.css should be placed to be used with the script.
I have tried following location:
{script_location}\css\style.css
{script_location}\public\css\style.css
Template view\layouts\main.tt defines <link rel=stylesheet type=text/css href="[% css_url %]"> as location of the style.css file.
The code defines $tokens->{'css_url'} = request->base . 'css/style.css'; as location of style.css file.
Rendered HTML code has <link rel=stylesheet type=text/css href="http://localhost:3000/css/style.css"> in the header.
And still CSS style defined in style.css does not produce expected result.
.intro {
background-color: #555;
}
For a test I have defined in view\show_entries.tt template
<dev class="intro">This line should have different background color</dev>
What is proper location Dancer2::Tutorial for style.css file?
NOTE: created database file dancer.db was not found in 'project' directory, but it was found in temporary directory %TEMP% instead.
NOTE: if style defined inside <head></head> it produces expected result
<head>
<style>
.intro {
background-color: #555;
}
</style>
</head>
I have a React app created using create-react-app which links to my CSS file as shown below in index.html file:
<link rel="stylesheet" href="../src/site.css"></link>
The site.css is implemented below:
body {
background-color: green;
height:100%;
width:100%;
}
When my app is run it does not apply styles to the body. I can see the css file is being downloaded.
The src directory is not served with create-react-app. You either need to move your CSS file to the public directory or import it from one of your JavaScript files.
Internally everything is bundled using Webpack with loaders that understand stylesheets, so the simplest way to handle this is to remove the link tag from your public/index.html file and instead add the following import to your src/index.js file:
import "./site.css";
Alternatively, if you really need to link to the stylesheet from your html file, you can move it to public/site.css and change your link tag to reference it:
<link rel="stylesheet" href="/site.css">
This is my stylesheet declaration code:
<link rel="stylesheet" href="username-theme.css">
<link rel="stylesheet" href="layout.css">
"username-theme.css" filename vary, ie john123-theme.css or jenifer-theme.css
I'm trying to solve the following problem:
in my layout.scss I want to use following code:
body{color:$theme-color}
where $theme-color comes from john123-theme.scss
Have a look at the documentation.
so you can have a file smth like _variables.scss with your variables defined and then in your layout.scss you will include it like
#import 'variables';
so all the variables will be available there.
You could try importing the other way, and at the end of your user stylesheet, import layout.scss. as long as the variable is defined before the import, it's value will be used in the layout.scss contents. Then you'll just have to link the user css file into the page, because it now includes everything you had in layout.scss. ex:
_layout.scss
body{color:$theme-color}
username-theme.scss
//define variable
$theme-color: #fff;
//import
#import "layout";
I've just started using LESS to simplify my CSS stuff. I want to be able to define the colours in one file, so I can have several colour schemes that I can switch between just by changing which file is being referenced.
I tried something like this:
<link rel="stylesheet/less" href="/css/colours.less" />
<link rel="stylesheet/less" href="/css/styles.less" />
But I get "variable not defined" errors in the styles.less file.
I can "fix" this by using import "/css/colours.less" at the start of styles.less, but I have to do this for every single LESS file, and it makes it much, much harder to change what file is being used.
Is there any way to define variables in one file and use them in another? Or any way to auto-import the colours.less file at the start of the other files?
You should be compiling your .less files into a single .css file and including it once on every page (i.e. styles.less compiled to styles.css). That way the browser doesn't have the overhead of recompiling the CSS every page load. Also the .css file can be cached.
Instead of adding:
<link href="/css/colours.less" />
<link href="/css/styles.less" />
<link href="/css/forms.less" />
<link href="/css/widgets.less" />
...etc...
It should be:
<link href="/css/styles.css" />
And in styles.less you should have:
#import 'colours';
#import 'forms';
#import 'widgets';
...etc...
Otherwise, if you want to reuse colours.less in multiple .less stylesheets, you'll need to #import them in each stylesheet.
For development purposes, I recommend using a single, primary .less file that contains only variable declarations and #import statements. That way it's easy to find where additional scripts are added. LESS makes it very easy to add or remove stylesheets to keep the code organized.
For example, style.less might look something like:
// import statements
#import 'core';
#import 'mixins';
#import 'lists';
#import 'buttons';
#import 'forms/form';
#import 'forms/search';
#import 'forms/contact-us';
#import 'modules/module';
#import 'modules/archive';
#import 'modules/events';
// variables
#image-path: '/assets/images/';
#font: Helvetica, Arial, sans-serif;
#black: #000;
#dark-grey: #333;
#grey: #888;
#light-grey: #CCC;
#white: #FFF;
#red: #F00;
This structure makes it easy to add a new stylesheet, such as when adding a new module:
...
#import 'modules/events';
#import 'modules/foo'; //add another module
...
It also makes it very easy to remove styles if they're no longer being used. If the foo module was to be removed, it's easy to remove all the foo styles simply by removing the #import 'modules/foo'; statement.
I have a set of Styles that were first created inside the style attribute on a page.
I want to move it from being on the page itself into a stylesheet.
however, when I move it to a .css file, the page breaks, move the code back to the html doc and it works fine again.
This makes absolutely no sense, moving styles from a style to a css file shouldnt break the code should it?
Am I missing something? I am not changing any of the code, its simply a copy and paste.
This is just a shot in the dark as (at the time of this post) you haven't provided source code.
Make sure you're linking to your stylesheet using a link tag in the head of the HTML document.
If you had:
<style type="text/css">
/* <![CDATA[ */
#someid
{
margin: 0;
padding: 3px 12px;
}
/* ]]> */
</style>
You'll need to have
#someid
{
margin: 0;
padding: 3px 12px;
}
in your CSS file with:
<link rel="stylesheet" type="text/css" href="path/to/style.css" />
to link to the stylesheet.
Some common newbie mistakes include:
<style type="text/css" src="path/to/style.css">: because it's a similar syntax to the <script> tag, which would make sense, but is invalid
<link rel="stylesheet" src="path/to/style.css">: but link elements use href not src
placing link elements within the body: although browsers will tend to manage link elements in the body, there are likely going to be some errors, and it's not a defined behavior
not specifying a doctype declaration: allows the browser to go into quirks mode, which is never a good idea.
You should make sure the stylesheet is properly imported.
Sometimes the #import doesn't work well if not used accordingly, so always reference your stylesheet:
<link rel="stylesheet" type="text/css" href="name-of-stylesheet.css" />
Always remember to close the <link> tag as it's a self-close tag. I think #zzzzBov forgot to mention that.
Finally, if that doesn't work, try to override some of the styles by physically writing (above the </head> section) something like:
<style type="text/css">
body { background: blue; }
* { color: red; }
</style>
and see if that gives you a blue background and red colored text. It should. After that, try to implement the referencing method and make sure you reference the stylesheet file to the right directory.
Good luck!
I had the same problem, but the cause was not some mistake in the code but the fact that the .css file was loaded with some delay after making the modifications in it. The server needed 5 - 10 minutes to update the changes.
I had this problem as well, and the reason was that the path had to be updated for some url() references since the css file was in another folder than the html file it previously was called from.
So basically
background-image: url('patterns/debut_dark.png');
had to be changed to
background-image: url('../patterns/debut_dark.png');
Don't include <style type="text/css"></style> in your .css file.
I had the same issue and was quite frustrating. I had a css file that was properly referenced, however not all the elements were being loaded from it. As it turns out, it was a cache problem in Chrome. After clearing it and restarting the window, the css elements were working correctly.
Ran across same problem. Found there were lines in my css file that should have been commented out (a block of colour palette information that I had cut and paste to the top of the file for quick reference).
If all your syntax seems fine, then its most likely a browser cache problem that we can easily fix. In your html/php file, reference your new .css style sheet (e.g. styles.css) by adding an extra random parameter. This will force browsers visiting your page to fetch your latest styles.css.
In the of your html/php file, you should have something like this to load your new styles.css file:
<link rel="stylesheet" type="text/css" href="styles.css" />
simply change it to be like this:
<link rel="stylesheet" type="text/css" href="styles.css?ref=v1" />
that extra "?ref=v1" will prevent browsers from re-using the styles.css file they have cached, and will force browsers to get your very latest styles.css file. As you make updates to the styles.css file and upload them to your web server, just change the "v1" to "v2" etc. or whatever naming system you like so that browsers are forced to reload the latest styles.css. Note adding this "?ref=v1" to the link does not need you to change the name of your styles.css file (you can change the file name but i find that gets messy). This is a simple and clean way to force browsers into re-fetching your very latest .css file.