I´m trying to add another file to webpack.mix.js in Laravel 5.4, but when I do that, I have an error in compilation.
This works:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
This doesn't work:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/web.scss', 'public/css');
How can I add another CSS to webpack into separate files?
EDIT
The error:
npm ERR! Darwin 16.6.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev" npm ERR! node v6.10.0 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR! # dev: node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the # dev script 'node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack'
Solution provided by Ross Wilson:
One thing you could try is deleting your node_modules directory and then reinstalling your dependencies (npm install).
It works for me.
You need to append all of the scss files into a array like so
mix.js('resources/assets/js/app.js', 'public/js')
.sass([
'resources/assets/sass/app.scss',
'resources/assets/sass/web.scss'], 'public/css');
This will output a single CSS file.
Related
I have a Symfony 5 application, i'm using webpack Encore / Ux for the first time.
I'm facing difficulties with deployment, only the HTML is displayed at the URL ; the "build" directory is almost empty, it only contains "entrypoints.json" and "manifest.json". the assets aren't compiled.
When im running npm run build to compile the assets in production i have this message :
sh: encore: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! # build: encore production --progress
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the # build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
The build script in the package.json doesnt work :
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
and i have no idea to where does this come from.
Would someone have something for this ?
i ran npm run build and it doesnt work, but it does in dev mode
Before deploying to production server you need to Compile Assets for Production on your dev server.
Then deploy only the built assets.
The process is documented here:
https://symfony.com/doc/current/frontend/encore/faq.html#how-do-i-deploy-my-encore-assets
This is the error log. And I cannot for the life of me fix this. everything works fine in dev but on deployment it fails. :(
23:12:53.687 Failed to compile.
23:12:53.687 ModuleNotFoundError: Module not found: Error: Can't resolve '../../styles/Homebody.module.css' in '/vercel/workpath0/components/Home'
23:12:53.687 > Build error occurred
23:12:53.688 Error: > Build failed because of webpack errors
23:12:53.688 at /vercel/workpath0/node_modules/next/dist/build/index.js:15:918
23:12:53.689 at runMicrotasks (<anonymous>)
23:12:53.689 at processTicksAndRejections (internal/process/task_queues.js:93:5)
23:12:53.689 at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:3:470
23:12:53.704 npm ERR! code ELIFECYCLE
23:12:53.704 npm ERR! errno 1
23:12:53.707 npm ERR! next_front#0.1.0 build: `next build && next export`
23:12:53.707 npm ERR! Exit status 1
23:12:53.707 npm ERR!
23:12:53.707 npm ERR! Failed at the next_front#0.1.0 build script.
23:12:53.707 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
23:12:53.714 npm ERR! A complete log of this run can be found in:
23:12:53.714 npm ERR! /vercel/.npm/_logs/2021-02-24T23_12_53_708Z-debug.log
23:12:53.719 Error: Command "npm run build" exited with 1
One thing is to start all .module.css files with a capital letter. Sometimes. however, you will still get the same error. To make matters worse, the error keeps occurring for varying .module.css files. So sometimes you will get A.module.css not found, and another time you get B.module.css not found.
I then deleted node_modules and ran npm i. No result; same error.
What did work for me was to make a new project with:
yarn create next-app
…and then add all the files from the old module one by one while redeploying the app each time to check it still works.
This isn't elegant, but it's fast enough and it does the trick.
This is an old question but I hope I can help someone in the future!
I was able to solve this issue by moving my CSS module file out of a subfolder into the root Styles folder.
Before:
-Styles
--Pages
---FileName.module.css
After:
-Styles
--FileName.module.css
I am in folder C:\Users\borka\Desktop\Courses\HTML & CSS (Traversy)\Sandbox\13_sass, using a bash terminal in VSCode and npm version 6.14.8.
I have successfully run npm init -y and npm install node-sass, then edited the package.json file to contain "scripts": { "sass": "node-sass -w scss/ -o dist/css/ --recursive" }.
Then, I created a scss directory with main.scss inside, as well as a dist directory. And finally, I run npm run sass, but it fails and here's what I get:
> 13_sass#1.0.0 sass C:\Users\borka\Desktop\Courses\HTML & CSS (Traversy)\Sandbox\13_sass
> node-sass -w scss/ -o dist/css/ --recursive
'CSS' is not recognized as an internal or external command,
operable program or batch file.
internal/modules/cjs/loader.js:883
throw err;
^
Error: Cannot find module 'C:\Users\borka\Desktop\Courses\node-sass\bin\node-sass'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 13_sass#1.0.0 sass: `node-sass -w scss/ -o dist/css/ --recursive`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 13_sass#1.0.0 sass script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\borka\AppData\Roaming\npm-cache\_logs\2021-01-31T16_01_42_707Z-debug.log
Notice how the Error: Cannot find module line displays a totally wrong path, one that doesn't even exist.
I've never worked with sass before and I have no idea what the problem is.
I can't make a comment yet, but I think that the package you are looking for to compile your SASS into CSS is this one. I noticed your using node-sass instead of regular sass. You can install it by running:
npm install -g sass
To install it globally on your system, and then compile your SASS.
Try with the one I'm sharing, or, if your are using an IDE like VSCode, you can dowload an extension like Live Sass Compiler (that's the one I normally use).
Apparently the ampersand in the path was the cause. I removed it from folder name "HTML & CSS", and now everything's fine.
I`m doing a tutorial on server-side-rendering with React/Express/Firebase.
This tutorial was created in 2017 and unfortunately, I struggle on the script section with babel in which I try to chain some commands.
Please take note that each command for itself works fine, but chaining them leads to the following error:
**Der Befehl "node_modules" ist entweder falsch geschrieben oder konnte nicht gefunden werden.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nonssr#1.0.0 babel: babel src -d functions/src && node_modules/.bin/babel index.js -d
functions
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nonssr#1.0.0 babel script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Thorsten\AppData\Roaming\npm-cache_logs\2020-03-16T08_46_28_887Z-debug.log**
The script command is th following:
"scripts": {
"babel": "node_modules/.bin/babel src -d functions/src && node_modules/.bin/babel index.js -d functions"
},
Is there a general mistake in this line of code?
Do you need additional code to analyse the mistake?
Best regards!
I found the solution by myself, but maybe someone can explain why it is like it is.
This code works:
"scripts": {
"babel": "node_modules/.bin/babel src -d functions/src && babel index.js -d functions"
},
I had to remove the second "node_modules/.bin/babel ...", just typed in "babel ..."
I have installed NPM correctly and written my main.scss file which I need to compile. My "package.json" file looks like this:
{
"name": "recreated-site",
"version": "1.0.0",
"description": "",
"main": "bootstrap.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile:sass": "node-sass sass/main.scss css/style.css"
},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.4.1",
"sass": "^1.26.2"
},
"devDependencies": {
"node-sass": "^4.13.1"
}
}
Upon running the command "npm run compile:sass" I get this error message:
An output directory must be specified when compiling a directory
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! recreated-site#1.0.0 compile:sass: node-sass sass/main.scss css/style.css
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the recreated-site#1.0.0 compile:sass script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Dell\AppData\Roaming\npm-cache_logs\2020-03-08T09_13_28_740Z-debug.log
I have no idea what I did wrong as I am new to SASS. Please help!
It seems you're running on Windows, which uses backslashes \ instead of forward slashes /.
Replace your blackslashes by forward slashes in your package.json like this :
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile:sass": "node-sass sass\main.scss css\style.css"
},
BTW, I'm not sure && and exit 1 works on Windows.
I had the same problem, I was using react-js.
After the changes in scss and compiled it again using npm command and it worked for me.
During defining scripts , In my case ,I just deleted The test line and only kept the compile:sass line. Below is my used scripts in JSON file:
"compile:sass":"node-sass sass/main.scss css/style.css -w"
}
After saving it , I open CMD at project location and run the command npm run compile:sass.
Hope this helps