I'm attempting to use source maps to live-edit scss in Firefox.
I followed the steps outlined in the documentation. My scss sources are visible and editable in the dev tools, but changes made to them are not reflected until I perform a manual page refresh.
My setup:
A local webserver with the following in its document root:
/
├── index.html
├── assets
│ ├── css
│ │ ├── main.css
│ │ ├── main.css.map
│ │ ├── scss
│ │ │ ├── main.scss
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>
42
</body>
</html>
main.scss:
body {
background-color:lightblue;
}
And, running in the css directory to generate the main.css and main.css.map files:
sass --sourcemap=file --watch scss:.
When I go to localhost/index.html in Firefox I can see the scss file, but when I save it over /path/to/document_root/assets/css/scss/main.scss the "main.css" displayed under it is struck through:
Saving it triggers sass to rebuild as expected, but Firefox doesn't seem to pick up on the rebuilt css until I refresh.
Related
I have a new Preact project which was generated using preact-cli and the default template.
I'm using Bootstrap components from react-bootstrap.
The default template looks like this:
├── assets
├── components
│ ├── app.js
│ └── header
│ ├── index.js
│ └── style.css
├── index.js
├── manifest.json
├── routes
│ ├── home
│ │ ├── index.js
│ │ └── style.css
│ └── profile
│ ├── index.js
│ └── style.css
│ └── style.css
└── style
└── index.css
I created a new component with a Card from react-bootstrap:
<Card as="a" href="#" class={style.customCard}>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title.
</Card.Text>
</Card.Body>
</Card>
In the corresponding style.css in the same directory, I added this:
.customCard {
background-color: red;
border: 5px solid red;
color: red;
}
None of these styles seem to be applied. If I inspect the element in Developer Tools, you can see that the class is not applied:
<a href="#" class="card">
<div class="card-body">
<div class="card-title h5">Card Title</div>
<p class="card-text">
Some quick example text to build on the card title.
</p>
</div>
</a>
I wonder if anyone could explain why this is happening, perhaps offering a workaround.
This happens locally via sphinx running readthedocs theme, it also happens in readthedocs.io.
I have added an svg logo (actually it's just the downloaded rtd logo.svg copied from their site for testing).
I've added the settings to conf.py and html builds fine.
html_theme = 'sphinx_rtd_theme'
html_static_path = ['_static']
html_logo = 'logo.svg'
html_theme_options = {
'logo_only': True,
'display_version': False,
}
If I inspect the logo class in Firefox it is set to "auto", if I add a width in px, the logo appears.
I feel as if I am missing something about the configuration of the readthedocs theme in the conf.py file?
Surely I should not have to hack at the CSS manually: I see no indication of altered CSS in the Readthedocs.io site when looking at their source.
I'm looking for an elegant solution - I do not want updates to readthedocs theme to break my site because I have been overriding the theme's CSS.
You're doing correctly
html_theme = 'sphinx_rtd_theme'
html_static_path = ['_static']
html_logo = "mepro_headshot.png"
html_theme_options = {
'logo_only': True,
'display_version': False,
}
I just added the logo in my docs/source/ and when you run make html, it copies your pngor svg files into docs/html/_static/. As mentioned in the documentation: New in version 0.4.1: The image file will be copied to the _static directory of the output HTML, but only if the file does not already exist there.
├── docs
│ │ └── html
│ │ ├── _static
│ │ │ ├── mepro_headshot.png
│ │ │ ├── mepro_headshot.svg
│ └── source
│ ├── _images
│ ├── _static
│ ├── _templates
│ ├── conf.py
│ ├── index.rst
│ ├── mepro_headshot.png
│ ├── mepro_headshot.svg
and it seems both
svg
and
png works
I had a similar issue, I've resolved it by adding the _static directory at the html_logo parameter.
html_theme = 'alabaster'
html_static_path = ['_static']
html_logo = "_static/logo_rw.png"
Same problem with .svg width auto zero px. For anyone that does want to set the css here is a solution:
sphinx-rtd-theme v0.5.0, sphinx v3.4.3
docs/_build/html/_static/css/custom.css:
/*
`width:auto` was rendering 0px wide for .svg files
https://stackoverflow.com/questions/59215996/how-to-add-a-logo-to-my-readthedocs-logo-rendering-at-0px-wide
*/
.wy-side-nav-search .wy-dropdown > a img.logo, .wy-side-nav-search > a img.logo {
width: 275px;
}
I'm experimenting with Spring Boot and I'm trying to create a simple custom Tag that acts as a wrapper for my JSPs. Although I have problems to load static resources from that Tag.
Below is my directory structure:
.
├── pom.xml
├── src
│ ├── main
│ │ ├── java
│ │ │ └── com....
│ │ ├── resources
│ │ │ ├── application.properties
│ │ │ ├── static
│ │ │ | ├── js
│ │ │ | ├── css
│ │ │ | └── libraries
│ │ │ | ├── jquery
│ │ │ | └── jquery.min.js
│ │ │ | ├── bootstrap
│ │ │ | ├── ...
│ │ └── webapp
│ │ └── WEB-INF
│ │ ├── tags
│ │ └── main.tag
│ │ ├── tlds
│ │ ├── views
│ │ └── productDetails.jsp
│ └── test
│ └── java
│ └── com
Whenever a page loads, the content is fine because I can check the HTML of the page but the static resources fail to load giving me console errors:
jquery.min.js:1 Failed to load resource: the server responded with a status of 404 ()
localhost/:1 Refused to apply style from 'http://localhost:8080/product/libraries/bootstrap/bootstrap.min.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
jquery.min.js:1 Failed to load resource: the server responded with a status of 404 ()
localhost/:1 Refused to apply style from 'http://localhost:8080/product/libraries/bootstrap/bootstrap.min.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
An interesting thing is that when I change the resources with CDN links it works fine. Somehow this is with Spring but I can't figure out what.
The main.tag is as follows:
<%# tag description="Core Page Template" %>
<%# attribute name="header" fragment="true" required="false" %>
<%# attribute name="jsImports" fragment="true" required="false" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="libraries/bootstrap/bootstrap.min.css">
<!-- I've even tried all possible combinations of that link
(e.g /libraries or /static/libraries or I moved the whole directory
under /webapp or /webapp/WEB-INF/)
but nothing seem to work. All the time I get 404 responses from the
server -->
<jsp:invoke fragment="header"/>
</head>
<body>
<jsp:doBody/>
<script src="libraries/jquery/jquery.min.js"></script>
</body>
</html>
Which I can use from a JSP like:
<%# page contentType="text/html;charset=UTF-8" %>
<%# taglib prefix="tt" tagdir="/WEB-INF/tags" %>
<tt:main>
<jsp:attribute name="header">
<title>Products - List</title>
</jsp:attribute>
<jsp:body>
Do body....
</jsp:body>
</tt:main>
I am quite new to javascript and I am following the example here: https://www.npmjs.com/package/socket.io-stream to attempt to set up a very simple file transfer that automatically just transfers the file as soon as the client connects.
However, I am getting the error:
Error: Module name "socket.io-client" has not been loaded yet for context
When I remove that line just to see if stream is working either I get:
Error: Module name "socket.io-stream" has not been loaded yet for context
socket.io-client missing sort of makes sense to me (as I have not included it anywhere in my <script> tags). However, the tutorial listed above has no mention of that. The socket.io-stream missing doesn't make sense to me as I followed their advice in the tutorial running
cp node_modules/socket.io-stream/socket.io-stream.js public/static/js
(Where index.html resides in public/) and included the JS file in my index.html
Kind of having a tough time finding answers on this one, any help you can offer is greatly appreciated!
Here is my server side code:
var io = require('socket.io').listen(80);
var ss = require('socket.io-stream');
var path = require('path');
io.of('/').on('connection', function(socket) {
ss(socket).on('write-file', function(stream, data) {
var filename = path.basename(data.name);
stream.pipe(fs.createWriteStream(filename));
});
});
and client side code:
index.html:
<script src="/socket.io/socket.io.js"></script>
<script src="/static/js/socket.io-stream.js"></script>
<script src="/static/js/require.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="/client.js"></script>
client.js:
var io = require('socket.io-client');
var ss = require('socket.io-stream');
var socket = io.connect('http://localhost:3000');
var stream = ss.createStream();
ss(socket).emit('write-file', stream, { name: 'test.txt' });
fs.createReadStream('test.txt').pipe(stream);
Here is a tree directory of my project
├── index.js
├── node_modules
│ ├── socket.io
│ ├── socket.io-stream
│ ├── socket.io-client
│ ├── ... a billion other node modules
└── public
├── index.html
├── static
│ ├── glyphicons
│ ├── js
│ │ ├── client.js
│ │ ├── require.js
│ │ └── socket.io-stream.js
│ └── style.css
├── test.txt
I developped a spring-boot application using thymeleaf as template. I use server context-path in my application.properties.
server.context-path: /myapp/v1.0
When I need to display images in my views.html I use this syntax
<img th:src="#{/img/first.png}" />
Everything is cool
But when I need to use images in my css file it dosn't work
/* Search input */
input.search-input {
text-align: left;
background-image: url('/img/search.png');
}
Woukd you have any idea ?
Thanks for your answers
In CSS file you should reference images using relative paths.
If your folder structure looks like (starting in src/main/resources):
.
├── application.properties
├── static
│ ├── css
│ │ └── style.css
│ └── img
│ └── first.png
└── templates
└── index.html
you should reference image in a way:
background-image: url("../img/first.png");