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.
Related
i know tailwindcss cli creates only the used class of the project in according with "content" options in tailwins.config.js.
but... is there a way to evitate this optimization (not considering content options and the written code) and let it creates ALL classes in according with the rest of configuration file???
I would like to create a styles lib by tailwind but not on a specific project. I would like create that lib in an angular library to share it then. Any ideas?
UPDATE: i found a command "tailwindcss-cli build -o <output.file>" that create all css from config. It create a very big file but i ma not so confident with it. I don't understand is tailwindcss-cli and tailwindcss are the same. I seems no in fact i can't have the same result using tailwindcss build bue if i call help on both cli i get the same.
thanks
If you are using Laravel, you have to run:
npx tailwindcss-cli build -o public/css/app.css
It will generate all styles (3MB file size). After finishing your application, you can run again:
npm run dev
to remove all unused styles, as it will take only used styles from your php code.
I am using below npx command to generate tailwind.config.js file, it is creating this file in root directory by default. I want to create it in custom /config folder. Could anyone please guide me.
Also wanted to know what all changes are needed for tailwind to work with config residing in custom folder.
npx tailwindcss init
Thanks in advance.
init command may accept one of these flags - -f to create full tailwind config and -p to create it with additional postcss.config.js. You may change directory and create config file there - not sure is it good for you or not
cd config && npx tailwindcss init
Every path within your config file is relative so pay attention at content section. Also your compiler as well must have correct path to config file, for example require('tailwindcss')('./config/tailwind.config.js') - but it depends in a way you compile styles
I have project in made Laravel. In scss file I've made changes (font-size and color) but I don't know how the css file is generated. Because I can't see changes in css file.
In Laravel documentation I see that css is generated in this way: mix.sass('resources/sass/app.scss', 'public/css');
but I don't know how to run this command.
If you have installed node and npm in your machine and already run below command
npm install
Then you need to follow two step.
Step-1:In your project root folder,there is file name wbpack.mix.js or your/project/dir/wbpack.mix.js and you may edit this file as you want
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Step-2: After editing this file, you need to run this command
npm run dev
with this command compiling would be start and after ending,you may reload your browser to see the changes. cntrl+F5 for fresh loading.
Otherwise download node & install it,npm will came over with node. And run first command and follow those two step.
Tip: if you changes your scss file or js constanly for the time being, you may run this command
npm run watch
Because,if you have changes in your scss and js file,you need to run over and over npm run dev to recompile your code.But if you have run npm run watch, it will automatically recompile,whenever you hit cntrl+s.
Before compiling your CSS, install your project's frontend dependencies using the Node package manager (NPM):
npm install
Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file.
npm run dev
I have one single code-base for my Vue application, but for different end users I need to compile this application with different styles. Let's say in my public (or assests) folder I have subfolders with css for each single end user (by users in fact I mean a group/organization). So, I have subfolders like:
\public\user1\all.css
\public\user2\all.css
\public\user3\all.css
And when I build my application (npm run build) I need to apply somehow specific styles. Something, like
$ npm run build -css_path \public\user1\all.css
But I don not know, if it is technically possible and if I'm on the right track. Probably, it should be done some other way. So, what is the best practice to apply different styles to Vue application on the fly (on build or compilation stage)?
You can specify environment variable with a particular value, in your case I think it would be userN values.
If css files in the public directory.
Just reference your css file in index.html with environment variable:
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %><%= VUE_APP_MY_VARIABLE %>/all.css">
And build with VUE_APP_MY_VARIABLE=user1 npm run build
If css files in the assets directory.
Using the same env variable but we should import that css file in the top of the main.js(if you use default project structure):
require('./assets/custom/' + process.env.VUE_APP_MY_VARIABLE + '/all.css');
or
import(/* webpackMode: "eager" */'./assets/custom/' + process.env.VUE_APP_MY_VARIABLE + '/all.css');
And build with VUE_APP_MY_VARIABLE=user1 npm run build as well.
I also recommend to create .env.local with, for instance, VUE_APP_MY_VARIABLE=user1 to be able to serve your local site and reference some default style to debug your app.
P.S. Check cross-env package which make your life easier with passing env variables. Because my build string is related to bash. With that package it would be cross platform:
cross-env VUE_APP_MY_VARIABLE=user1 npm run build
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!