i'm trying to add a stylesheet to my plugin. I followed this and added a styles folder and my css "glstyle.css" inside, then my cumulocity.json looks like this:
{
"name": "Occupation Stats",
"description": "Parking spot occupation statistics",
"ngModules": [
"glsmartparking-v3.occupationstats"
],
"js": [
"index.js",
"dateutil.js",
"controllers/ocs-controller.js"
],
"css": [
"styles/glstyle.css"
]
}
But the css isn't loaded in the page. Am I doing something wrong?
Have you registered your plugin again with grunt pluginRegister:<pluginName> after changing its manifest in cumulocity.json?
Related
I am using libman For managing client side libraries, and using the fileSystem provider.
Facing this issue:
{
"library": "Content/.",
"destination": "wwwroot/lib/animate/",
"files": [ "animate.css" ]
},
{
"library": "../../fonts/font-awesome/css",
"destination": "wwwroot/lib/font-awesome/",
"files": [ "font-awesome.css" ]
},
The font-awesome library is copied to the destination while the animate is not copied to the destination. The source libs exist.
I also tried Content instead of Content/. but this isn't working too. This issue is causing the build to fail as the BundlerMinifier.BundlerBuildTask is failing.
This is happening with other libs too like:
{
"library": "../../Scripts/.",
"destination": "wwwroot/lib/modernizr/",
"files": [ "modernizr-2.6.2.js" ]
}
What is the appropriate solution for this?
I realize this question has been asked several times but all of the solutions I've come across don't seem to work for me. I'm running into the following error while trying to run Jest tests for a Vue app.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://facebook.github.io/jest/docs/en/configuration.html
Details:
/node_modules/vue-awesome/icons/expand.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
^^^^^^
SyntaxError: Unexpected token import
> 17 | import 'vue-awesome/icons/expand'
.babelrc:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"env": {
"test": {
"presets": [
["env", { "targets": { "node": "current" }}]
]
}
}
}
jest config in package.json:
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"moduleDirectories": [
"node_modules",
"src"
]
}
It looks like the initial import in the script for the Vue component being mounted for the test is working but the import within the module itself (import Icon from '../components/Icon.vue) is not recognized.
boiler plate repo to re-creates the issue: github.com/DonaldPeat/stackoverflow-jest-question
How can I resolve this?
You just need to make sure that vue-awesome will be transformed by jest, so add
following to your jest config:
transformIgnorePatterns: ["/node_modules/(?!vue-awesome)"],
which means: "Ignore everything in node_modules except for vue-awesome.
Also here is exhausive list of other issues that might cause this error: https://github.com/facebook/jest/issues/2081
If you are encountering this problem after updating to a newer Jest version, try clearing Jest's internal cache:
jest --clearCache
Adding this in the package.json works for me (replace <package_name> with causing package name)
"jest": {
"transformIgnorePatterns": ["node_modules/(?!<package_name>)/"]
}
We had the same issue with another library. The root cause was that we had a circular dependency in code. But the error text did not refer to it at all. just like in this post: "Jest encountered an unexpected token..."
In my case I needed testEnvironment: "node" in jest.config.js file. The error came out when I started tests against Vue Router.
// jest.config.js
module.exports = {
preset: "#vue/cli-plugin-unit-jest/presets/typescript",
transform: {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
moduleNameMapper: {
"^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
testEnvironment: "node", // It fixes my issue
};
I'm following the tutorial here http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/4
and I added bootstrap as per the instructions and it all works according to plan
there's a config that I have to add to the vendor part of the aurelia.json file
"dependencies": [
...
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
},
...
]
but I like materialize-css and I figure I could just install materialize-css via npm and then change the bootstrap bit of the config to this
{
"name": "materialize-css",
"path": "../node_modules/materialize-css/dist",
"main": "js/materialize",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/materialize.css"
]
}
when I use this in app.html
<require from="materialize-css/css/materialize.css"></require>
the app blows up with a Unhandled rejection Error: Failed loading required CSS file: materialize-css/css/materialize.css
I can't work out why this is the case. To me it seems like I did a like for like swap of css frameworks
Nothing wrong with it.
Check the instructions http://aurelia-ui-toolkits.github.io/demo-materialize/#/installation in case missed a step
I am new to Aurelia and falling at the first hurdle.
I have created a new project using the aurelia cli and have selected to use less.
This works fine until I try to use bootstrap. I have installed bootstrap with npm which appears in node_modules/bootstrap/
This has the directory structure
dist fonts grunt Gruntfile.js js less LICENSE package.json README.md
There are css files in the dist directory.
In my template I do
The error I get is
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
How do I tell Aurelia where the bootstrap css files are and how to use them ?
Thanks
I found out one simple thing. Every time you modify aurelia.json file, you need to terminate au run --watch task, a start it again, and it will just work.
I did not find this in documentation.
Hope this helps.
There is solution for bootstrap downloaded from npm:
app.html:
<require from="bootstrap/css/bootstrap.css"></require>
package.json you have to add:
"overrides": {
"npm:jquery#^3.0.0": {
"format": "amd"
}
}
aurelia.json (aurelia_project folder) you have to add at the end of "app-bundle.js" bundle:
"dependencies": [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
It should look like this:
"bundles": [
{
"name": "app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{css,html}"
],
"dependencies": [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
},
It works for me.
We are still working on the CLI's ability to import libraries into a project and configure them correctly for bundling. Remember, it is an alpha. We will have major improvements coming for this in the future. In the mean time, remember that you can always use traditional techniques for including libraries if you aren't sure what to do. So, I would just include the style tag in your html page and a script tag as well, just pointing at the location for the files in your packages folder.
This is a major use case for us, we just haven't worked out all the library import capabilities yet. We will address this soon.
Using Aurelia CLI
First, install the following in your project:
au install jquery#2
au install bootstrap
Second, in aurelia.json add this line in bundles:vendor-bundle.js
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": [
"jquery"
],
"resources": [
"css/bootstrap.css"
],
"exports": "$"
}
Then Add the following fonts after dependecies
"copyFiles": {
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf": "bootstrap/fonts"
}
Third, After setting import/install. Now you can reference it inside your app.html
<require from="bootstrap/css/bootstrap.css"></require>
Or simply add it as a globalResources inside main.ts
aurelia.use
.standardConfiguration()
.feature('resources')
.globalResources('bootstrap/css/bootstrap.css');
For more information on au install/import check it here or adding library in bundles.
I found that I had to change the boostrap css path in app.html to the one expected for Bootstrap 4, per a comment on Aurelia Discourse:
from this:
<require from="bootstrap/css/bootstrap.css"></require>
to this:
<require from="bootstrap/dist/css/bootstrap.css"></require>
If you are here in July 2019, the answer by #davidjmcclelland is what worked for me. After installing bootstrap, simple include require from=bootstrap/dist/css/bootstrap.css> in your app.html. No configurations required.
In my development I need to include third part javascripts; like money.js (http://josscrowcroft.github.com/money.js/)
What is the best 'clean'/'proper' way to achieve it ? Just include it in index.html ?
No. Don't directly add the additional javascript files in the index.html file. That is not the recommended way (though it may work).
Instead, do like this,
Include the following line in your index.html. microloader is the folder that is shipped with sencha sdk and contains three files mainly, development.js, production.js and testing.js , each one for it's own purpose.
< script id ="microloader" type="text/javascript" src="../../microloader/development.js"> < /script >
Then, in your <appname> folder, you will need to have a file called as app.json. It will look something like this ..
{
"name": "Sencha",
// All javascript files go here ...
"js": [
{
"path": "../../sencha-touch-all-debug.js"
},
{
"path": "app.js",
"update": "delta"
},
{
"path": "http://josscrowcroft.github.com/money.js/",
"update": "delta"
}
],
"css": [
{
"path": "../../resources/css/sencha-touch.css",
"update": "delta"
},
{
"path": "resources/css/app.css",
"update": "delta"
}
],
.....
.....
.....
}
If you are using Sencha Cmd your index.html may look like this:
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
So after changing app.json you'll need to refresh your app:
sencha app refresh
Pure javascript did the trick for me. I just included this block of code in the launch function:
var scriptTag = document.createElement('script');
scriptTag.src = 'specify the path here...';
document.body.appendChild(scriptTag);
The scriptTag gets appended into the body of your index file.
The following worked for me with Ext JS 5.0.0, if the external JavaScript library is local. After the editing, run "sencha app build"
Make changes to three JSON elememtns in app.json.
(1) js
(2) css
(3) resources
{
"name": "Sencha",
// All javascript files go here ...
"js": [
{
"path": "app.js",
"bundle": true
},
{
"path": "leaflet/leaflet.js",
"bundle": true
}
],
"css": [
{
"path": "bootstrap.css",
"bootstrap": true
},
{
"path": "leaflet/leaflet.css",
"bootstrap": true
}
],
.....
/**
* Extra resources to be copied along when build
*/
"resources": [""leaflet/leaflet.js","leaflet/leaflet.css"
],
.....
.....
}