I'm using bootstrap-icons in my VueJS app. After loading the page, these errors appeared
Failed to decode downloaded font
OTS parsing error: invalid sfntVersion: 1008813135
for bootstrap-icons' .woff and .woff2 fonts.
Here is the font loading part in the bootstrap-icons.css file:
#font-face {
font-family: "bootstrap-icons";
src: url("./fonts/bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d")
format("woff2"),
url("./fonts/bootstrap-icons.woff?856008caa5eb66df68595e734e59580d") format("woff");
}
Here is the import for bootstrap in my css file:
// Bootstrap
#import 'bootstrap';
#import '~bootstrap-icons/font/bootstrap-icons';
This error also happens on my production server, but with Font-Awesome, which working fine on my dev server.
Can you suggest any way to fix this, or where the source of the problem might be? I've searched the whole internet but still don't have any clue.
I've found the issue. It was my public folder that did not contain the fonts with the right path. I added the fonts to the folder with the path as specified in the error and all things works now.
P/S: This might be a temporary workaround, for if there are multiple icon packs and each requires a different font path, the build folder might get overloaded with tons of fonts folder. Would any one suggest a way to manage this problem?
I do not exactly know the solution to your problem but I did a little research and found this Link
There are numerous solutions on it, I hope one of those might help you.
Related
I have spent 3 hours figuring out what's going on but could not find it out. I am new to HTML and intellisense help me know many attributes of a tag on the go. However, with .vue files html attributes are not being shown up.
a) Attributes being shown up in "index.html"
b) No attributes hints in "TodoItem.vue"
I have already installed Vetur, HTML CSS Support and Vue VSCode Snippets extension from marketplace.
First, install Vetur extension after that go to
File > Preferences > Settings
In the list find and open Extensions find Vetur, scroll down and find Template Interpolation Service (must be checked).
I found it.
you need to install this official extension to get tailwind css hints.
Tailwind CSS IntelliSense
everything will come true
Nothing fixed it, i tried everything online.
I tried to use a different path like ./node_modules/bootstrap etc. I deleted my node_modules an reinstalled it. I copied the bootstrap CSS file and put it inside my project directory and imported it but that didn't work either. Am searching for hours now and i am tired of it, hope someone can help me. I tried to install bootstrap 3 but that didn't change anything. It's like it doesn't allow a CSS to be imported. I also got this error, i was testing just a new css file to be imported but i got Unable to resolve "./style.css" from "App.js" Why is it not able to import a css/bootstrap file?
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"react-bootstrap": "^0.32.1",
I guess react native can't import css files? But how do i then use bootstrap?
you can't use bootstrap with react-native as bootstrap currently only works with css. You can you a different library like react-native-material-kit
There are plenty of tutorials on including font assets using rnpm. These are the steps:
Put fonts in, say, ./assets/fonts
Add the following snippet to package.json:
"rnpm": {
"assets": [
"./assets/fonts",
]
}
run react-native link.
Works well for font assets, but what about other types? I need to include a text file, but repeating the above steps for text file assets does not seem to have any effect. What am I missing? There are no mentions on the internet, so I'm not even sure this is possible at all with rnpm.
EDIT: To be more specific, I added a file.txt to the ./assets/raw directory and added ./assets/raw next to ./assets/fonts in the rnpm config in package.json. After running react-native link I expected file.txt to appear in the Android project assets directory (/android/app/src/main/assets), and in the "Copy Bundle Resources" build phase in iOS project, but it didn't happen. react-native link ran normally and produced no errors.
My ultimate goal is to include a text file in the app bundle and have it accessible at runtime. Another option would be to wrap the text in JSON, but that way it ends up in JS bundle increasing its size by ~25%, which is probably not good. Some also recommend react-native-fs to read the file, but I'm not sure where to put it so that it's available for both Android and iOS. rnpm knows where to put assets for Android and iOS (and how to copy them to bundle), so using it seems to be the way to go, but I can't make it work with text assets.
Any thoughts or suggestions?
After digging around in the React Native CLI I found out that react-native link, handles only fonts. Here's the relevant piece of code from /node_modules/react-native/local-cli/link/android/copyAssets.js:
/**
* Copies each file from an array of assets provided to targetPath directory
*
* For now, the only types of files that are handled are:
* - Fonts (otf, ttf) - copied to targetPath/fonts under original name
*/
module.exports = function copyAssetsAndroid(files, targetPath) {
const assets = groupFilesByType(files);
(assets.font || []).forEach(asset =>
fs.copySync(asset, path.join(targetPath, 'fonts', path.basename(asset)))
);
};
As you can see, groupFilesByType groups all files by their MIME type (font, text, etc.), but then only fonts are actually copied to the project.
Others ran into this issue before. There was a pull request adding support for video assets, but it was not merged. Apparently the way to go is to use packager.
So here's a question. I'm new to Sylius, and am working on some simple CSS updates. I have a local copy of Sylius running with the built-in webserver: server:run. I also have a development server on Digital Ocean, which runs an (almost) identical copy of Sylius, aside from the configs of course.
Something strange is happening with my CSS update, however. I made a change to .navbar-brand within web/assets/compiled/backend_backend_4.css.
This change showed up immediately on my local. On the development server, however, when pulling down the change (git), and verifying that it now exists in that file, the change doesn't seem to propegate. It's effects aren't shown, inspecting the stylesheet doesn't show them, and furthermore viewing the css file sourcecode directly in the browser does not show the change. But on the filesystem it's definitely there.
I've tried clearing the cache, to no avail.
I also checked the assetic value in both config_dev.yml files, and verified they are both set to use_controller: true
Even still, I tried dumping assetic, to no avail.
So I'm wondering what's going on. Additionally, I realize that I probably shouldn't edit CSS files within a folder called 'compiled'. I'm sure there's a way to do that using a compiler, but I'm not yet familiar with the process and am just making minor changes and learning about caching so far.
Yes you are right you shouldn't be editing the compiled files.
You should edit the source files, then run gulp
or on my system i have to explicitly run npm run gulp
I've documented the solution that worked for me here. It didn't involve Gulp at all, but instead uses Assetic:
Assets need to be installed as hard copies first (I'm not quite sure
what this does exactly, but it seems like an important step because
it copies a lot of assets to places. Documentation was unhelpful but
it was suggested on Stack Overflow somewhere.):
app/console assets:install web
Assets should be edited in web/bundles/[bundle-here]/css or js. This
is frequently within syliusweb if it has to do with page styles /
layouts.
Hint: These assets are referred to in files such as
src/Sylius/Bundle/Resources/views/Backend/layout.html.twig (see the
opening:
(% stylesheets
tag, or search universally for this tag).
Within this tag, you'll see that stylesheets have an output to the compiled folder, but also list the
bundles where they pull their original css from. You should edit one of the source css files, if you'd like your changes to end up in the destination css.
After editing assets, dump assetic:
php app/console assetic:dump
Note - it is also possible to set an assetic watcher on these assets
(google to find out how, think it's a -w flag somewhere), but this is
said to only work in development mode, as it should.
After dumping assetic, the assets from the source bundles compile into their assets/compiled versions, usually combining multiple stylesheets. You should now see your asset refresh!
I'm currently using the OSX app LiveReload v2.1. It watches and compiles my HAML files just fine but for some reason it doesn't seem to compile my SASS files properly. It checks my SASS files - I know because it warns me of SASS related errors upon saving. It also creates the appropriate CSS files upon saving the SASS files however, when I open the CSS files they are completely blank.
I'm a bit of a SASS n00b but I'm just trying to get any basic styling to compile down to proper CSS. For example, the following:
body
background-color:blue
Any pointers on what I might be doing wrong would be much appreciated. Also, I should point out that I also manually installed the SASS gem, just in case, though that didn't seem to fix anything.
I figured it out. It didn't have to do with LiveReload at all, but instead how my SASS was formatted. There needed to be a space between the attribute and value. For example:
body
background-color:blue
Should have been:
body
background-color: blue
It would have been nice if SASS pointed this error out rather than simply spitting out an empty CSS file, oh well.