Inside my package.json file I have a command under scripts below:
"scripts": {
"build-css": "tailwindcss build src/styles.css -o public/styles.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"autoprefixer": "^10.3.0",
"tailwindcss": "^2.2.4"
}
}
Here is my file structure
When I try to use my build command and run npm run build:css I get this error
[deprecation] Running tailwindcss without -i, please provide an input file.
I don't understand what I'm doing wrong if I already specified the path under scripts doesn't that mean I already included the input file?
You have to include the -i option and the path to that file when building your CSS using a custom CSS file. For example, change the build-css script in your package.json to be the following.
"scripts": {
"build-css": "tailwindcss build -i src/styles.css -o public/styles.css"
},
Related
I have installed husky in my npm project as a prepare script like below
{
"name": "functions",
"scripts": {
"build": "tsc",
"start": "npm run serve",
"deploy": "firebase deploy --only functions",
"prepare": "husky install functions/.husky"
}
"dependencies": {
"firebase-admin": "^11.4.1",
"firebase-functions": "^4.1.1",
},
"devDependencies": {
"husky": "^8.0.2",
"typescript": "^4.9.4"
}
}
husky is declared as devDependencies as this npm module is only required while local development and has no need in runtime app.
So when I run npm run deploy, I get the below error
i functions: updating Node.js 16 function funName(us-central1)...
Build failed:
> prepare
> husky install functions/.husky
sh: 1: husky: not found
npm ERR! code 127
npm ERR! path /workspace
npm ERR! command failed
npm ERR! command sh -c -- husky install functions/.husky
This error clearly states that husky is not installed.
One possible solution is to create a prepare.js script which checks if the script is running while in local development or in the firebase server(to prepare the project) and then conditionally run the husky npm module command
I just ran into this exact same issue but with tsc. I'm not sure why, but the prepare script is also run in the cloud function (not just locally) while deploying. However, considering you likely have the node_modules directory in the functions.ignore list in the firebase.json, the node_modules directory doesn't get uploaded as part of the deployment and so the husky package isn't visible to the script when it gets run in the cloud function environment.
You likely don't need the husky script to be run in the function environment either way, so you can add a condition to check for an environment variable that is usually set in the function environment (I am using the GOOGLE_FUNCTION_TARGET environment variable in my case), and only run the command if that environment is not set. You also need to wrap this in a bash script instead of adding it inline in the package.json because of how the prepare script is run.
For example, here's the content of my scripts/prepare.sh file.
#!/bin/bash
set -o verbose
# Only run if the GOOGLE_FUNCTION_TARGET is not set
if [[ -z "$GOOGLE_FUNCTION_TARGET" ]]; then
npm run build
fi
Then I use it in my package.json prepare script:
// ...
"prepare": "./scripts/prepare.sh",
// ...
There's potentially a better solution to this, but this is how I got it to work for me. Hope this helps!
This SO answer is spot on and uses bash script. I used the same concept mentioned in the answer to write the prepare script in js in scripts/ folder with the name of prepare.mjs
"use-strict";
import * as path from "path";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// Firebase sets the GOOGLE_FUNCTION_TARGET when running in the firebase environment
const isFirebase = process.env.GOOGLE_FUNCTION_TARGET !== undefined;
if (!isFirebase) {
process.chdir("../"); // path where .git file is present. In my case it was ..
const husky = await import("husky");
husky.install("functions/.husky"); // path where .husjy config file is present w.r.t. .git file
}
And in my package.json I have used the above script as follows
{
"name": "functions",
"scripts": {
"build": "tsc",
"start": "npm run serve",
"deploy": "firebase deploy --only functions",
"prepare": "node ./scripts/prepare.mjs"
}
"dependencies": {
"firebase-admin": "^11.4.1",
"firebase-functions": "^4.1.1",
},
"devDependencies": {
"husky": "^8.0.2",
"typescript": "^4.9.4"
}
}
This uses the environment variable(GOOGLE_FUNCTION_TARGET) documented by the Google at the doc
This is my first time using Tailwind and I'm stuck just setting it up.
I'm following a course on Udemy and I've gone over every step twice but mine just isn't working like it is in the video.
Styles applied with Tailwind are working but every time I add something new in, I have to use npm run build-css to see any of the changes.
When watching the video, he'll put in a new style class and just save it then refresh the browser and the changes are there.
Is there something I'm missing here?
I've been hunting around for an answer for a while and can't find any help.
package.json
{
"name": "package.json",
"version": "1.0.0",
"description": "package.json",
"main": "tailwind.config.js",
"dependencies": {
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14"
},
"devDependencies": {
"tailwindcss": "^3.0.24"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-css": "tailwindcss build -i style.css -o css/style.css"
},
"author": "",
"license": "ISC"
}
tailwind.config.js
module.exports = {
content: ["./*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
style.css
#tailwind base;
#tailwind components;
#tailwind utilities;
Using the build command will only update the output file on that instance. You should be using the watch command so the output file is constantly being updated. Here are the scripts I'm using to develop with Tailwind.
/ package.json /
"scripts": {
"start": "react-scripts start",
"build-css": "tailwindcss build -i ./src/input.css -o ./public/output.css",
"watch-css": "tailwindcss build -i ./src/input.css -o ./public/output.css --watch",
"dev": "concurrently \"npm run watch-css\" \"npm start\""
},
Run "npm run watch-css" instead of "npm run build-css" [Replace the file location with your own files. After -i is the location of your input css file, after -o is the location of your output css file].
If you're trying to use React, you can install concurrently to run scripts simultaneously. In this case I'm starting my local ReactJS project and I'm watching the Tailwind output file. Or you could just open two terminals and run both scripts.
There's good information in the TailwindCSS Documentation.
I think you have something missed on html file to link up CSS. I just copy your code and added this html.
Check the screenshot the same structure you have.
https://prnt.sc/knox4-8NCK2e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="bg-red-300 h-40">
<h1 class="text-2xl">Tailwind CSS works</h1>
</div>
</body>
</html>
Now Run Command :
npm install
npm run build-css
In my case, I run watch instead of build, and it solved my problem.
npm run watch
this would help you.
I am not sure what went on, but whenever I wanted to add unit testing to my app, I had to add .babelrc file with just the following code:
{
"presets": [
"es2015",
"next/babel"
]
}
Prior to that, I did not need the file and it was just an nextjs app with semantic. So far, so good. Until I decided to rebuild my semantic-ui theme which turned out to be a massive mistake!
This was what I ran: cd semantic && gulp build
This caused my app to stop working whenever .babelrc is present.
These are my package.json scripts:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"semantic": "cd semantic && gulp build",
"test": "mocha --require babel-core/register --watch-extensions js **/*.test.js"
},
If I attempt to run the next related scripts, I get the following error:
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/theJuls/Workspace/cbt/client/node_modules/babel-preset-es2015/lib/index.js
If I try to run my unit tests, I get
Error: Plugin 0 specified in "/Users/theJuls/Workspace/cbt/client/node_modules/next/babel.js" provided an invalid property of "default" (While processing preset: "/Users/theJuls/Workspace/cbt/client/node_modules/next/babel.js")
If I remove .babelrc, all the next scripts run normally, however I completely lost my unit tests. Why is this happening? What can I do to fix this?
I am not sure if this is relevant but here is my current file structure:
api/
components/
config/
lib/
pages/
semantic/
store/
.babelrc
package-lock.json
package.json
semantic.json
I am not sure why it suddenly broke, but I have figured out a way around it which is also the more up to date way to do it, as my previous one was deprecated.
First off I had to install the following modules: #babel/core and #babel/register
Changed the .babelrc file to as follows:
{
"presets": [
"#babel/preset-env",
"next/babel"
]
}
Finally, in package.json just slightly change the test command to:
"test": "mocha --require #babel/register --watch-extensions js **/*.test.js"
Since we are now using #babel/register
This made everything come back to normal.
I created a brand new React application with create-react-app and now I want to add SASS to it.
I followed the instructions here. Basically I run
npm install node-sass --save-dev
and then added these two lines to my package.json file:
"scripts": {
"build-css": "node-sass src/ -o src/", # Line 1
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive", # Line 2
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
This should do the job, according to the documentation, but when I complete the process doing
mv src/App.css src/App.scss
and then
npm run watch-css
the script just won't finish by itself. I always have to use Ctrl-C to finish it and I believe this is not normal.
My questions are:
Is this normal?
Have I missed something?
If so, what have I missed?
You need to transpile the scss to css for this you can use Webpack or Gulp. I will show you an example for Webpack as I prefer this more. Webpack it takes a while to config you can watch tons of internet tutorials.
In order to transpile scss into css you need to write a loader, in Webpack will be something like this:
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
'style', 'css!sass'
)
},
]
},
This are the packages for the loader, install with npm --S -D sass-loader style-loader into package.json file.
Now in order for Webpack to see the scss files you need to import those files into a js/jsx file for example App.jsx. But to not have a lot of imports you can have a base.scss and you will import other scss fils into it
example import './assets/stylesheets/scss/base.scss';
base.scss contains import to other scss files.
This is just a small introduction to what you must do. You need a little bit more to config Webpack you can search on youtube for that or This github link will help you alot!
Gulp is similar you write tasks, as far as I know there is gulp-scss package.
I made a folder g in root(C:/) in where I try to install Grunt via npm.
I sucessfull made: npm install -g grunt-cli.
I configured package.json to this:
{
"name": "testing",
"version": "0.0.0",
"dependencies": {
"grunt": "~0.4.5" },
"description": "testing",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5"
}
}
So good so far.
BUT: When I try to install Grunt: npm install grunt --save-dev and modules(plugins) then I run into this error: npm WARN package.json testing#0.0.0 No repository field...
I use GitHub where I've forked Grunt and Grunticon.
Then I can't succed with nothing towards installing Grunt...
Any good clues and help in solving this?
Okay, I think I see the problem clearly now. Here are some instructions for getting Grunt running, try to follow these exactly, do not create any other folders as it could cause issues for Grunt or Node.
Create a folder for your project, this can be anywhere on your system.
Save the file you have above as package.json in that folder.
Now install the global Grunt CLI
~$ npm install -g grunt-cli <-- Note this is "grunt-cli" NOT "grunt"
Then go to the new directory you created and run this command:
~/new-directoty$ npm install
This will install the Grunt runtime locally for your project because it is specified in package.json
Create a very simple config file in the new directory and name it Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({ /* your config will go in here */ });
/* multi-task definitions go here */
};
Now try to run Grunt just to test that it works:
~/new-directory$ grunt
After that you are ready to start adding plugins, but that's a bigger topic. Good luck.