I'm currently practicing some tailwindcss frontend design. I've installed it using npm, and I didn't get any errors. I made the build script for tailwindcss. When I run the appropriate command to build the tailwindcss, it doesn't output it to the style.css file I set as the output file. I also don't get any errors. This is my code for the package.json file:
{
"name": "design",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:css": "tailwindcss build src/style.css -o dist/style.css"
},
"author": "",
"license": "ISC",
"dependencies": {
"tailwindcss": "^1.3.4"
}
}
You seem to be missing npx in your command, try this instead:
npx tailwindcss build src/style.css -o dist/style.css
https://tailwindcss.com/docs/installation/#4-process-your-css-with-tailwind
The correct way to add scripts:-
"build": "npx tailwindcss build src/style.css -o dist/style.css"
Related
I am having trouble downloading Sass in the command line.
I'm using Studio Code for my text editor. I need to know how to download it and add it to a website project.
This is what I have done so far in the command line
$ node --version
v17.8.0
$ npm --version
8.5.5
$ npm i sass
up to date, audited 18 packages in 2s
2 packages are looking for funding run 'npm fund' for details
found 0 vulnerabilities
$ npm start
sass-app#1.0.0 startsass./sass/index.scss./css/style.css
'sass.' is not recognized as an internal or external command, operable program or batch file.
Here is the json package file.
{
"name": "sass-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "sass./sass/index.scss./css/style.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {"sass": "^1.49.9"
}
}
You're missing spaces in your start script to separate the program name from the arguments.
"start": "sass./sass/index.scss./css/style.css"
should be
"start": "sass ./sass/index.scss ./css/style.css"
Installed node, ran npm init to create package.json, installed parcel. running the server with npx parcel index.html runs the server. Then I changed "scripts" to "start": "parcel index.html" in package.json, and run npm run start, it also runs the server without a problem. And then I added to "scripts" "build": "parcel build index.html" and run npm run build. But this does not work...
I get the error below...
> vjezba-17#1.0.0 build
> parcel build index.html
× Build failed.
#parcel/namer-default: Target "main" declares an output file path of "index.js" which does not match the compiled bundle type "html".
C:\Users\ijevr\Desktop\JavaScript\vjezba 17\package.json:4:11
3 | "version": "1.0.0",
> 4 | "main": "index.js",
> | ^^^^^^^^^^ Did you mean "index.html"?
5 | "scripts": {
6 | "start": "parcel index.html",
ℹ Try changing the file extension of "main" in package.json.
Of course, changing the main to index.html states that the file should be a .js file... index.js is what the npm init created in the package.json. In my folder, my main js file is named script.js, and it was named like this before I ran npm init. However changing the main to script.js also does not help, I get the same error as stated here...
I don't know what to do to npm build it...
I didn't find a fix, but I found out that with Parcel 2 the build process changed.
Works now.
Script should look like this:
"start": "parcel",
"build": "parcel build"
and main and source like this:
"main": "dist/index.js", //with dist being the path of the build
"source": "src/script.js", //and src the path of our project
To resolve these issues. Kindly remove the "main": "index.js", from the package.json files.
From this package.json::
{
"main": "index.js",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
}
}
To this package.json::
{
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
}
}
https://parceljs.org/getting-started/migration/#package.json%23main
Remove the main property from package.json completely, or add this to the package.json:
"targets": {
"main": false
},
For me, this worked https://stackoverflow.com/a/71708198/20383654
I added the following as suggested and the build worked.
"targets": { "main":false },
All I can find for this are solutions that require installing an npm package that will start up an http server for hosting the file. My only requirement however is opening a very simple generated html file from the local computer into the browser via a npm script, no server required, is this doable without a package?
I tried the Daniel's answer, but it does not works to me.
Based on his answer, I found the open-cli package.
npm i -D open-cli
and use it (open-cli) in package.json script object like so
{
"name": "somename",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"open-my-html": "open-cli path/to/your/index.html",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies: {
"open-cli": "^6.0.1"
},
"author": "",
"license": "ISC"
}
then run
npm run open-my-html
Now it works opening the html file on default browser.
Found that I could create a bash script with contents
#!/bin/bash
start chrome "$(realpath "./jest/report.html")"
And then run that using
"test": "jest && bash ./open-browser.sh"
Supposing that your node script and index.html are in the same folder
const open = require('open');
(async () => {
await open('index.html', {"wait": true });
})();
Take a look at this package: https://www.npmjs.com/package/open
the easiest way to do this is to install the open package
npm i open --save-dev
and use it in package.json script object like so
{
"name": "somename",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"open-my-html": "open path/to/your/index.html",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies: {
"open": "^7.3.0"
},
"author": "",
"license": "ISC"
}
then run
npm run open-my-html
{ "start": "start http://localhost:8000 & npm run dev", }
just use above script this works for me. first it will open url in browser and then launch the server. issue is first url will throw error and then after runing sever page wil be auto reload.
This is better if you dont need to use any external package.
I'm new to this! I am following a tutorial and we installed everything, and I want to run the gulp command but I can't.
This is the json package-
"name": "wlbs4",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.7",
"gulp": "^3.8.10",
"gulp-sass": "^4.0.2"
},
"dependencies": {
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"popper.js": "^1.16.1"
This is my terminal command:
Noas-iMac:wlbs4 noahanan$ gulp
bash: gulp: command not found
What am I doing wrong? Thanks!
I tried to install globally but I think I don't have permission.
Thanks!!
If you want to run gulp globally (as you are doing in your question), you need to install gulp globally on your machine.
npm install -g gulp
You don't need to do this for the other dependencies in your project.
If you run into permissions issues, try:
sudo npm install -g gulp
However, take caution - it is not always considered 'good' practice to install Node Packages with Root level privelages.
This Stack Overflow answer should give you further guidance on the topic https://stackoverflow.com/a/24404451/2316753
I would like to know if it is possible to defien in npm package.json a specific folder for a dependency.
For example I would like to install dojo not in the default node_modules but on an arbitrary directory.
Notes: I am aware of bower, but I would be interested to know if it is possible to do it with npm and package.json alone. Thanks.
{
"name": "xxx",
"version": "1.0.0",
"main": "index.js",
"keywords": [
"dojo"
],
"author": "",
"dependencies": {
"dojo":"^1.10.4",
"connect":"^3.4.1",
"open":"^0.0.5"
}
}