I added bootstrap5 via style and script tags in app.html
bs5 works fine but vite throws error that files are not found.
any advice?
Error message
Error: Not found: /vendors/bootstrap-5.0.2/bootstrap.min.css.map
Error: Not found: /vendors/bootstrap-5.0.2/bootstrap.bundle.min.js.map
files located:
/static/vendors/bootstrap-5.0.2/bootstrap.min.scss
/static/vendors/bootstrap-5.0.2/bootstrap.bundle.min.js
I would not recommend adding anything to the app.html, instead import from a root +layout.svelte, installing bootstrap from NPM.
The errors refer to .map files that specify what parts of a minified JS file refer to which lines in a source file. You probably did not copy the files over, so they cannot be found. The files are reference from the .min.js files.
But as noted, one should not import scripts like that.
When installing from NPM you need the packages:
bootstrap
#popperjs/core
It is possible to import just the code for specific components and compile the CSS from source (see docs). To import all code and styles you just need:
<script>
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
</script>
It is preferred to only import what is actually needed to reduce the resulting bundle size.
Related
I have an electron-react app. I need to use Bootstrap for styling.
Earlier I used bootstrap from CDN, and it worked like a charm. But I need my application to even work offline.
So I need to somehow embed Bootstrap inside my app. I tried downloading bootstrap locally and then using its css files inside the app, but I happen to see that when I package my application I don't find
Bootstrap in the packaged version. I put the CSS folder inside the app folder itself. It worked when I ran 'npm run start', but didn't when I packaged the app.
<link rel="stylesheet" href="./css/bootstrap.min.css">
When I package the app, it gives FILE NOT FOUND for bootstrap.min.css
I know I have a way to use npm package for bootstrap. But even that doesn't work when packaging the app.
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
This gave the same error for FILE NOT FOUND.
I prioritise on using raw CSS file for bootstrap, but if have a working solution with npm package please mention.
Thanks in advance!
I am using the WebStorm 8 IDE to build a dart web app. I have the following directory structure:
root
web
main.dart
lib
packages
browser
intl
intl.dart
pubspec.lock
pubspec.yaml
In main.dart I have the following import statment: import "package:intl/intl.dart";
However when I try and compile main.dart to javascript I get the following error:
dart2js
Error occurred:
/Path/To/Project/root/web/main.dart:2:8:
Error: Can't read 'package:intl/intl.dart' (Error reading '/Path/To/Project/root/web/packages/intl/intl.dart' (OS Error: No such file or directory, errno = 2)).
import "package:../packages/intl/intl.dart";
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Error: Compilation failed.
So it seems that dart2js looks in the current directory of the dart file to be converted for the packages, which is incorrect.
I tried changing my import statement to import "package:../packages/intl/intl.dart"; but I got the same error.
Does anyone have any ideas?
UPDATE:
I can use pub build to build my project and produce a main.dart.js. Not sure what is different when I call build, perhaps something is wrong with WebStorm?
dart2js is not a recommended workflow and can be buggy in WebStorm 8. It is completely removed from the context menu in the upcoming WebStorm 9. Use 'pub build'.
I can't see anything wrong. I think this is one of the cases where only
pub cache repair
can help.
My folder structure looks like this:
lib\
my_library.dart
web\
index.html
main.dart
pubspec.yaml
In main.dart, I'm currently importing my_library.dart (which has library my_library at the top) by doing:
import '../lib/my_library.dart';
This works fine. However, it feels a bit fragile to have this relative path. I read in the Pub Package Layout Conventions that I can probably use import 'package:blah'; it says:
When you use libraries from within your own package, even code in src, you can (and should) still use "package:" to import them
So, I tried changing my code to this:
import 'package:my_library.dart';
However, in Chrome Dev Editor I get:
Target or URI does not exist: 'package:grid_data.dart'
and in Dartium I get:
GET http:// 127.0.0.1:51792/MyProject/web/packages/my_library.dart 404 (Not Found)
What's the correct way to import something from my lib folder from other dart files in my project?
You are missing the package name
import 'package:my_project/my_library.dart';
The package: part in your import statement references the packages folder in your my_project package (the folder that contains the pubspec.yaml. The remainder of the import statement is the path to the file you want to import.
You can browse through the folders and files in this packages folder in DartEditor or a file manager to see exactly how the files are organized.
This folder also contains a symlink named my_project which points to your my_project/lib folder.
I have my project in github. I already created it like a library (Dart). Now I am trying to use my library in one of my project.
After i add all the necessary comments to get it from my git source, pub get is giving the following error,
Warning: Package <library_name> does not have a "lib" directory so you will not be able to import any libraries from it.
Got dependencies!
Any clue???
Thanks,
Tham
When importing libraries, the files you import come from the lib folder.
Eg:
import 'package:danny/danny.dart';
will import the file lib/danny.dart from the danny package.
If the package doesn't have a lib folder; this means you can't possibly import it. If you're importing directly from a Git repo; you need to ensure the lib folder is a top-level folder.
When I try to import a package with the syntax import 'package:markdown/markdown.dart';, I get no error in Dart Editor but when I run the dart application, the debugger shows me the message:
An error occurred loading file: package:markdown/markdown.dart
Failed to load resource
chrome-extension://gfjabgeipkcfopofkhjimepepnomcidk/dart/packages/markdown/markdown.dart
But when I write the whole path (import "../../packages/markdown/markdown.dart";) everything works fine. I cannot understand why the syntax package: doesn't work in my code though it works in Dart Editor's own examples.
You can see the Chrome app architecture below (I'm loading a package from translator.dart):
You should have the package added as a dependency in pubspec.yaml (which I assume you do).
Also try running following:
delete packages folder
delete pubspec.lock
run pub get to fetch the
dependencies again.
I think in your md_to_html folder you need a link to the 'packages' directory for the shortform to work. I seem to remember this happening when the workspace is built but I'm not sure now which command triggers it, have a look at the current pub docs.