[英]Can't compile sass using “npm run watch” - Laravel
Ok. 好。 I'm taking a course on Laravel through udemy, and all the styling is done in sass.
我正在通过udemy参加Laravel的课程,所有的造型都是用sass完成的。 I followed the same steps as the instructor but I'm getting errors whereas his worked fine.
我按照与教练相同的步骤,但我得到了错误,而他的工作正常。 Can someone please help.
有人可以请帮助。 I'm on windows and he is on MAC
我在Windows上,他在MAC上
I installed Laravel using composer, then migrated my database tables. 我使用composer安装了Laravel,然后迁移了我的数据库表。
The next thing we had to do was install node and stuff using 接下来我们要做的就是安装节点和使用的东西
npm install
npm安装
Here is where the problems lay. 这就是问题所在。 I did not get a node modules folder, whereas he did.
我没有获得节点模块文件夹,而他做到了。 To get a node modules folder I needed to run
要获取我需要运行的节点模块文件夹
npm install node-laravel But the folders contained different contents.
npm install node-laravel但文件夹包含不同的内容。
After i added sass folders into laravel, and to compile them he ran 在我将sass文件夹添加到laravel之后,为了编译它们,他跑了
npm run watch
npm跑表
SASS compiled perfectly for him, whereas I got this error SASS完美地为他编译,而我得到了这个错误
> @ watch C:\Users\andre\Dropbox\Code\Personal\CodingPhase\PHP-7\DesignSt
orm
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --wa
tch --progress --hide-modules --config=node_modules/laravel-mix/setup/web
pack.config.js
The system cannot find the path specified.
events.js:183
throw er; // Unhandled 'error' event
^
Error: spawn node_modules\webpack\bin\webpack.js ENOENT
at notFoundError (C:\Users\andre\AppData\Roaming\npm\node_modules\cro
ss-env\node_modules\cross-spawn\lib\enoent.js:11:11)
at verifyENOENT (C:\Users\andre\AppData\Roaming\npm\node_modules\cros
s-env\node_modules\cross-spawn\lib\enoent.js:46:16)
at ChildProcess.cp.emit (C:\Users\andre\AppData\Roaming\npm\node_modu
les\cross-env\node_modules\cross-spawn\lib\enoent.js:33:19)
at Process.ChildProcess._handle.onexit (internal/child_process.js:198
:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch: `cross-env NODE_ENV=development node_modules/webpack/bi
n/webpack.js --watch --progress --hide-modules --config=node_modules/lara
vel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ watch script.
npm ERR! This is probably not a problem with npm. There is likely additio
nal logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\andre\AppData\Roaming\npm-cache\_logs\2018-01-27T20
_14_57_489Z-debug.log
EDIT 编辑
This is the package.json 这是package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "0.*",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
"dependencies": {
"nodejs": "0.0.0"
}
}
npm install
is the command that tells npm
(Node Package Manager) to install the packages listed in package.json
. npm install
是告诉npm
(节点包管理器)安装package.json
列出的package.json
。 The command npm install node-laravel
tells npm to install the package node-laravel
which is a "[...] Node.js library for inter-operating with Laravel.". 命令
npm install node-laravel
告诉npm安装包node-laravel
,它是一个“[...] Node.js库,用于与Laravel进行交互。”。 Running npm install node-laravel
is creating a node_modules
folder because you're installing a package, but it's the wrong package: node-laravel
is not what you're looking for. 运行
npm install node-laravel
正在创建一个node_modules
文件夹,因为你正在安装一个包,但它是错误的包: node-laravel
不是你想要的。
The problem you're having is that npm install
is not installing the dependencies listed in package.json
so let's work through why that might be. 你遇到的问题是
npm install
没有安装package.json
列出的依赖项,所以让我们解决为什么会这样。
There are 2 types of dependencies listed in package.json
, dependencies
and devDependencies
and as you can see from your package.json, all of your dependencies are in devDependencies
. package.json
, dependencies
和devDependencies
列出了两种类型的依赖devDependencies
,您可以从package.json中看到,所有依赖项都在devDependencies
。 devDependencies
are only installed when you're in a development environment, they are not installed in a production environment. devDependencies
仅在您处于开发环境中时安装,它们未安装在生产环境中。 This is (roughly) what happens: 这(大致)会发生什么:
npm install
npm install
dependencies
dependencies
列出的所有内容 development
npm will also install the packages listed in devDependencies
development
新公共管理也将安装在列出的软件包devDependencies
Your dependencies
are listed as only nodejs
so there is nothing for npm to install and therefore npm does not need to create a node_modules
folder. 你的
dependencies
被列为唯一 nodejs
因此没有对NPM安装,因此NPM并不需要创建一个node_modules
文件夹。 Therefore, the problem you're having (npm is not installing packages listed in devDependencies
) is most likely because npm believes you're in production. 因此,您遇到的问题(npm不是安装
devDependencies
列出的devDependencies
)很可能是因为npm认为您正在投入生产。
There are 2 options: 有两种选择:
devDependencies
regardless by running npm install --only=dev
devDependencies
无论是否运行npm install --only=dev
npm config set -g production false
then run npm install
again npm config set -g production false
更新环境配置以正确地将环境设置为开发,然后再次运行npm install
The second option is a solution to the problem, the first is a workaround. 第二个选项是问题的解决方案,第一个是解决方法。 I recommend option 2.
我推荐选项2。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.