Onsen UI v-ons-icon not working - vue-component

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!

Related

how to move sass to laravel

#ask
Hello I want to ask,
Now I'm working on a college project, using laravel, when I enter the Blade Templating stage in Laravel ... I'm having trouble trying to move the .sass file to my Laravel project.
because previously when making the initial appearance of the website that I created, I used sass.
the question is, how do you get the .sass file to run in laravel?
#first-effort
previously I've searched on google and got the same question on stackoverflow... he suggested to install npm "npm install", then move all my css and sass files to resources/assets/sass after that run the command "npm run dev" , then it says all files will go to the app.css file
but after I try to run it, the result is still the same.
#my sass photo
https://imgur.com/a/xVNChUh
#Project display now when run
https://imgur.com/a/VQl242R (there is some styling because I made some styling in main.css, but the rest is in the sass file, so it looks messy like that)
#My Project display "should" (this is still running using html css on local)
https://imgur.com/a/Az8nx1W
Please help

Single File component export - not using vuetify styling

I have a vuetify project (Windows / VSCODE).
Our plan is to create components for our internal teams to use - no NPM.
I created a hello-world.vue component and ran a script (below) from package.json to create a dist folder with that component. This works fairly well, but in another application demo.html or such the Vuetify Button v-btn does not have any of the styling from vuetify... The script creates the individual components based off the vue file.
script executed to generate components "buildSFC": "cross-env vue-cli-service build --target wc --name jcdc-sfc 'src/components/*.vue'"
What am I missing to get VUETIFY styling and such?
See GIT HUB for code: https://github.com/wlafrance/jcdc-sfc
If you pull the git down, in a vue command line execute this script: npm run buildSFC
Then look for a dist folder in the project and open the html file in chrome to see the issue.
So see what it is suppose to look like (the button) execute: nmp run serve
Your publicPath in vue.config.js probably defaults to / which is you root drive. So if you have it running on Windows and on your C: drive then your demo.html will look in C:\ for the files.
Add a publicPath: "./" to your vue config.
Also check your package-json scripts. buildLib has a ./src/ but buildSFC does not.

Meteor + PhantomJS how to make it work

im trying to install PhantomJS in a MeteorApp.
I have done those step:
Add the npm package
meteor add meteorhacks:npm
Run meteor to let the npm package to pre-initialise
meteor
A file packages.json has been created at the root. Edit it to:
{
"phantomjs": "1.9.13"
}
A this point everything seem to work. But i try to test with this exemple that ive found here :
https://github.com/gadicc/meteor-phantomjs
But i dont understand where to put my phantomDriver.js
Why is phantomDriver.js is in assets/app/phantomDriver.js... but after, they say to create the file in ./private/phantomDriver.js...
Thank for clear explication :)
In development mode you create the file in /private/phantomDriver.js. When you build a meteor app it refactors everything into an application bundle which can be run.
After meteor builds your app it stores stuff from private into assets. For phantomjs to execute this file it needs to look in this directory. You don't have to create it. This is how meteor works internally.
If you look in your .meteor/local/build/programs/server directory the assets directory is there with anything you placed in private.
From the context of where your meteor code runs (the server directory above) the assets directory runs from this directory when your project is running.
Keep in mind when you deploy your app it loses its entire project structure and becomes something else. Gadi's phantomjs project is designed to work in production environments too.
TLDR; Don't worry about the assets directory, keep your file in /private/phantomDriver.js. Meteor should take care of the rest.

semantic-ui dist folder - Deployment without npm and/or gulp

I have a dist folder inside semantic-ui zip file that I downloaded (version 1.8.1 to be precise)
Is this folder the only thing i need to deploy my Web Application as far as semantic-ui related files are concerned?
Would including semantic.js and semantic.css be enough for my web application?
I am asking this question as I want to eliminate the need of installing npm and gulp on my target machines and would just like to copy over the css and js files that are needed by the application.
Including semantic.min.js, jquery, and semantic.min.css will should be enough for the start since the semantic.min.js contains all the modules you'd need. You will find these files in 'dist' folder.

Can't compile file using Compass

I have tried both ways to compile a project using compass (i.e. via the gui app, and the command line.)
I get this error in both instances. "Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help."
Where do you add the directory argument?
I suspect the way to get this working is just switch to your directory for your project and then run
compass init
This will then create you a "working" config.rb, and a directory called sass, and a directory stylesheets
and a couple of start scss files.
If you do not want them, or want to use different directories, you can of course now edit your freshly created and working config.rb, and change your directories (and then delete the old automatically created ones)
Anyway having done that(or not) you should then be able to run
compass watch
and all should be good , i.e. your scss files get compiled to css files
Or then run your gui tool
More information to be found in the compass documentation here

Resources