I'd like to know what that error is and how to fix it. I'm simply following Tailwind's official installation guide (yarn add -D tailwindcss and then yarn tailwindcss init) and my tailwind config file cannot be created.
Related
I have a problem when installing react app using this line - "npx create-react-app my-app --template typescript", and tsconfig.tsx file is not created automaticly and I have to set it up everything manually using -"npm install --save typescript #types/node #types/react #types/react-dom #types/jest" and crating stconfig.tsx. All athers file ar instaled in .tsx format. onley mising mane ts configuration.TH
the files must be created automatically as far as I know and it is not possible to find a solution or a reason for the problem, maybe someone is facing this problem to?
everything work fine, but this time I want to push my code to production
using netlify, which is ok in development
but in production isn't get shown
and I know also why:
this is happening because the dist folder is inside .gitignore
but I want to ask if there is way to generate tailwind inside "scripts"
now I have this:
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"twcss": "npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --watch"
},
is there a way to npm run build with npm run twcss && vite build
but && means the same time run two scripts.
but I want to do first the tailwind then vite build
another problem is that tailwind don't exit but continue infinitely
so is will never compile the build if the twcss don't finish
for now the script should run on the build time netlify and not on the development.
and I have this netlify config
that is config correctly CSS js svelte to compile but not tailwind
this happen to me also before.
I believe that in the script of tailwind, delete the --watch flag
❌
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --watch
✅
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css
this edit will make a tailwind exit when compiles everything, and will not wait for upcoming changes.
so it will make this the best choice for production!
in netlify write this command
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css && vite build
so with && (that it will not give bugs anymore now)
with this order:
tailwind
vite build
attention: vite build need to be always at the end
now also the CSS of the tailwind will be minified (inside the same CSS file of svelte),
so it is also production ready. (like the svelte/JS code you tell us before)
why you have --flag without knowing?
yes you have it because you used the example on the tailwind docs,
which is good for development or static websites
because of reloading on every change/class added in html
but like you said is impossible to stop (in netlify)
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'm making a Vue 2 component. But when I npm link it in other project and imported (I'm importing it in a random component doing: import InputTag from 'vue-input-tag' ) I'm seeing this:
Failed to mount component: template or render function not defined.
(found in component <input-tag>)
Any ideas? I'm going crazy.
Here is the repo: https://github.com/matiastucci/vue-input-tag/tree/wtf
Thanks!
I hit this same issue when upgrading an old (v0.11.x) Vue.js app. Vue.js 2.x introduces compiled (render-function) templates. Additionally, these are the new default.
Here's more info from the 2.x docs:
http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build
In my case, I was using browserify and partialify to include the templates (as strings), so there was no pre-compilation to render function happening.
To fix this, I used aliasify to make sure the vue requirement was fulfilled with the "Standalone" copy of Vue.js rather than the "Runtime-only" version.
I did the following:
npm install --save-dev aliasify
edited the package.json to include this code:
"aliasify": {
"aliases": {
"vue": "vue/dist/vue.js"
}
}
added -t aliasify to my browserify command, which now reads:
browserify -e src/main.js -t aliasify -t partialify -o build/bundle.js
You can do this with webpack also--and there's info in the Vue.js docs for that.
I hope that helps!
Most packages nowadays are available in both NPM and Bower. I have to have NPM around, but I'd like cut Bower out of the loop on my project.
I'm currently relying on grunt-wiredep to create <script> includes in my index.html. This tool looks at all of the Bower configs to pull all the necessary js and css files into my index.html for me.
Is there a tool that will do the same for NPM dependencies?
You would be able to do that using a module bundler like Browserify or Webpack.
For getting started with Browserify , you will need to first install it via NPM globally
npm install -g browserify
Then in your project , get the frontend library you want to include , like for example the angular library
npm install --save angular
Now you will need to use require() to make Browserify aware of the dependencies that it needs to fetch for the project to work (In case of Angular app, where you define the main module , add this first line)
var angular = require('angular');
angular
.module('autocompleteDemo', [])
.controller('DemoCtrl', DemoCtrl);
For setting up the grunt-browserify task , first install it in the project
npm install grunt-browserify --save-dev
and configure the task as follows
browserify: {
main: {
src: 'entry.js',
dest: 'bundle.js'
}
}
Lastly in your index.html , you will need to add markup for the bundle.js script
<script src="bundle.js"></script>
Example code can be found at https://github.com/pra85/grunt-browserify-example