Google Chrome dev tools all of sudden stopped showing the CSS file names on my local drive - see screen shot at link:
Link to CSS Dev tools no file names
However when I goto the WWW it works just fine - there I can see the CSS file names?
Can someone please help - I don't think it was me as I have been using them for years and it has worked just fine.
See Web screen shot:
Web Site link dev tools with file names
I just noticed this today
Thank you.
I wonder if it is a symptom of using Workspaces in developer tools. Have you setup workspaces and mapped network resources locally? I haven't used them much, but I messed around to see if I could replicate your problem.
I didn't see exactly what you are seeing here, but the CSS file name went away when I setup a workspace, leaving only localhost/ .
Without workspace:
With workspace:
Please try the following:
Open DevTools
Click the settings cog in the upper right.
Scrolling to the bottom of the general tab and clicking "Restore defaults and reload."
Workspace references sourcemaps from its root
I just fixed this issue by generating my sourcemaps so that they reference their source files (less in my case) relative from the root of my workspace. When not using dev tools workspace, it works because they are able to find the source files relative to the directory that the sourcemap is in. When not referencing from a workspace, this breaks since Chrome appears to reference from the workspace root. Ran into the same issue for JS source maps as well.
MyWorkspace (node project root)
> bower_components
> node_modules
> routes
> wwwroot (public static root)
> app (AngularJS client)
> assets
> css
> app.css
> maps
> app.css.map
> less
> bootstrap (less source)
> app.less
> app.js
> package.json
So for me, the sourcemap "sources": array must reference my less source files like so:
app.css.map
{ "version":3,
"sources": [
"/wwwroot/assets/less/app.less",
"/wwwroot/assets/less/...."....
In addition to this I had to setup node so that when it runs in dev mode it exposes additional routes for /wwwroot/ as well as /node_modules/ so that it could link the routes correctly to my workspace.
I'm using gulp-less-sourcemaps to build the CSS sourcemaps and my less build step looks like (in case anyone's struggling with gulp) -
.pipe(less({ sourceMap: { sourceMapRootpath: '/wwwroot/assets/less' }}))
If you change the path of your CSS when Chrome is currently mapping, it may map the invalid folder path.
My solution it is:
Open DevTools
Go to settings
Go to workspace menu
Delete invalid folder
Related
First; I saw similar questions, however, they don't contain a valid solution for me, tried all of them and they were not working.
The thing I want to achieve is really simple, I just want to put a background image in CSS, but I receive an error image not found.
Using image from assets in HTML like:
<img src="assets/images/news-placeholder.png" alt="news-image" />
works pretty fine.
Approach url('/assets/images/wallpaper.jpg') in CSS works, but only on localhost, when deployed on the server the image is not found as there is no assets folder in root directory and that's my problem. Also the IDE (PhpStorm) says that it can't resolve assets directory even if the image shows up.
I found out, that this approach: url('assets/images/wallpaper.jpg'), is the best, but when I use it there is an error at localhost, that it can't resolve image in path of component, eg. /src/app/modules/portal/components/page-header
If your app is deployed anywhere else than the host's root path, i.e. www.example.com/apps/myApp instead of www.example.com, it needs to be built with appropriate --base-href flag, like this:
ng build --prod --base-href /apps/myApp
Make sure you have added the assets folder inside the build option in angular.json like this.
"assets": [
"src/favicon.ico",
"src/assets"
]
I tried the official installation guide for installing wagtail locally :
first by creating a website
second by integrating wagtail into a new website
Each time it seemed to work fine functionally but all the CSS was broken (see pic down)
I tried to do "manage.py collectstatic", it told me that 2/3 hundred files have been copied, I emptied the cache of my browser, loaded the page again, no change.
In the console it seems that the files are sent :
[14/Jul/2019 10:16:54] "GET /static/css/welcome_page.css HTTP/1.1" 200 3003
I restarted several times the tutorials from the beginning making sure I do each step exactly as described, nothing changes. When I begin with a new django project, the base django css is working before I add wagtail. I m using Python 3.6.8, Django 2.2.3 and Wagtail 2.5.1. What am I doing wrong ?
To answer #Dan Swain comment :
Settings.py file :
https://pastebin.com/zZqDesnr
Ok so simply my django-wagtail server was serving css but with an incorrect mimetype. My browser received the css but because of the wrong mimetype it didn t apply them
I had to add :
import mimetypes
mimetypes.init()
mimetypes.types_map['.css'] = 'text/css'
To my settings files and everything worked fine
One standard Wagtail folder structure includes a settings folder (not just a settings.py file). Inside the settings folder you would find base.py, dev.py, local.py, and production.py. You are using, instead, a plain settings.py file that is at the same level in the directory structure as your wsgi.py. Inside your settings.py you have a BASE_DIR declaration that is typically used in the settings folder setup:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
I think that your problem will be fixed if you change that line to:
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
I found missing 3 style files by F12 debugging. Copy the style folder to the target folder. From wagtail-master\wagtail\admin\static_src\wagtailadmin\scss to wagtail-master\wagtail\admin\static\wagtailadmin\css. That solve my style error.
if CSS is not working in admin panel in wagtail. you should check your nginx setup at first. in nginx there are should be such configurations:
location /static/ {
alias /home/path_to_project/project/staticfiles/;
}
please give attention, there should be alias not root
I just install new pwa onsen UI project for vue-cli using npm. All components working properly only icon components not showing icon while running app.
Even, I uncomment from v-ons-components file v-ons-icon
still its not working
I also wasn't seeing v-ons-icon components although everything else showed. The icons did show when in npm run dev but not after npm run build when opening the app from the built index.html file or running the app in the android emulator.
I got errors like GET file:///Users/[username]/[appname]/www/dist/static/css/static/fonts/fa-solid-900.132e975.ttf net::ERR_FILE_NOT_FOUND` and the file it was looking for would be in the place it was looking for, just without the "css" folder.
For example, the build would point to a www/dist/static/css/static/fonts/ folder for the font files, although it had placed those files in a www/dist/static/fonts folder. ... it was assuming a "css" folder to be there that wasn't there. The build process was somehow extracting the fonts reference into an additional "css" folder.
Since fonts were working in dev but not build, I compared webpack.dev.conf.js to webpack.prod.conf.js.
The webpack.prod.conf.js file contained extract: true inside of rules: utils.styleLoaders. This "extract" setting was not contained in the webpack.dev.conf.js file, so I deleted extract: true from webpack.prod.conf.js ... and then, when I ran npm run build again, the v-ons-icon components showed!
I am pretty sure what I am trying to accomplish is kind of extreme.. no wait, it isn't!
I just need to get the ionic resources+phonegap-cli+phonegap build combo right.
Now, here's the problem.
No matter how hard I try (because I probably am trying hard and wrong ^^ ) I can't get an ios build to show the icon files I am submitting to phonegap build. But I am beginning to consider the fault not entirely on pg:build side.
I have a root folder, with an /app application and a /resources folder. The latter is generated by ionic resources.
Now when I build for phonegap remote I have this structure in a /pgbuild folder I create ad hoc:
/resources
/www
The config.xml (which is in the main project root folder) contains the following entries:
(source: cloudfront.net)
Here's my ipa package contents:
(source: cloudfront.net)
Which is more or less what specificated in the phonegap build docs. In the docs there is no way I found to understand to which path these src are relative. To the root of the zip? to the root of the www? I've tried also to move /resources to /www, to no avail.
I've tried pretty every combination of folders and src, but I am missing something because the info.plist contains only:
CFBundleIconFiles = ( "icon.png", "icon-60.png", "icon-60#2x.png", "icon-76.png", "icon-76#2x.png", "icon-60#3x.png" );
which is weird because these icons are correct :) except for icon.png which doesn't get copied.
In one app I had this exact problem which prevented me to submit to the app store, I finally solved it but -believe me or not- I am not able to recreate this condition on another app.
These are the commands I run from my ionic app root:
ionic resources
to generate resources, then:
mkdir -p pgbuild/www;
mkdir -p pgbuild/resources
cp -R ./resources/* ./pgbuild/resources
cp -r ./www/* ./pgbuild/www;
cp config.xml pgbuild/;
cd pgbuild && phonegap remote build ios && cd .. ;
Is phonegap-cli supported for this kind of remote build? Am I missing something?
#suprandr,
I've got online Demo Apps on getting icons and splash screens working. The documentation for iOS is especially convoluted. (Should we blame middle managers for taking old documentation offline?)
The notes on github include: On filesnames and how they are found for iOS
NOTE: I only use PhoneGapBuild. I've created boilerplates to get around this annoyance for remembering what I did the last time. Best of Luck, Jesse.
Here's what I found.
I understand that resources must be inside www, and the path in config.xml is relative to the www folder. That seems to fix the problem, even if you should increase the size of your app bundle this way (it would be better if phonegap could take resources outside of the www folder which is used by the application).
so if I have a
www/resources/ios/icon/something.png
in the config I should use
resources/ios/icon/something.png
Also, the ionic resources command embeds resources into
<platform name="ios">
That doesn't seem to be appreciated by Phonegap Build.
i generated the scaffold of a famo.us project with Yeoman (yo famous)
i set up i small working project
i tried to launch it with 'grunt serve' command
it all works but no image is loaded because the folder content/images is not loaded
how can i include it?
thanks
I'm Myles the author of the Famous-Generator. The images in '/content/images/' should be able to be loaded as an absolute or relative path... although I have just updated the generated 'main.js' to use an absolute path for the sake of being explicit.
Remember that when you famous code is run it will be running inside of index.html, and therefore have the same "relative path" for included assets. As well, since you are serving via a development server, you are able to reference anything with absolute paths relative to the root directory of the project.
You should not have to touch requireConfig at all to be honest. It is only used to add vendor code installed in 'lib' to your path within require so you can reference modules by name rather than path. 'underscore' rather than '../lib/underscore'. This becomes nice as you begin to nest folders and don't want to have to manage relative paths. This also makes your code a lot more portable!
A nice sidebar, you should install all vendor code with 'bower install --save $LIB_NAME'. This will save the library / version to your bower.json and inject the path for the module into you requireConfig. Basically you can bower install anything and just start requiring!
yo famous is working just fine!
it was my mistake to try to set relative paths inside requireConfig including images: that is not working but i don't know if it is supposed to!
you have to use relative paths for every image and everything will be ok!