Home » Php » php – Error with Laravel css styling when trying to run npm run dev

php – Error with Laravel css styling when trying to run npm run dev

Posted by: admin February 25, 2020 Leave a comment

Questions:

Laravel Version: Laravel Framework 6.5.2

Node version: Node.js v12.16.0.

[email protected]

Hi guys, I am currently working on a project for university but am facing some errors that have me at a complete roadblock. I was trying to use styling to improve the look of my website and had followed a tutorial but have faced the following issue, any help is much appreciated!

I get the following error when I try npm run dev in my command line:

λ npm run dev npm WARN npm npm does not support Node.js v12.16.0 npm WARN npm You should probably upgrade to a newer version of node as we npm WARN npm can't make any promises that npm will work with this version. npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9. npm WARN npm You can find the latest version at https://nodejs.org/

> @ dev C:\xampp\htdocs\basicwebsite
> npm run development

npm WARN npm npm does not support Node.js v12.16.0 npm WARN npm You should probably upgrade to a newer version of node as we npm WARN npm can't make any promises that npm will work with this version. npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9. npm WARN npm You can find the latest version at https://nodejs.org/

> @ development C:\xampp\htdocs\basicwebsite
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

 ERROR  Failed to compile with 2 errors                                16:06:55  error  in ./resources/sass/app.scss

Module build failed (from ./node_modules/css-loader/index.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:    object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (C:\xampp\htdocs\basicwebsite\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:85:11)
    at Object.loader (C:\xampp\htdocs\basicwebsite\node_modules\sass-loader\dist\index.js:36:28)
    at C:\xampp\htdocs\basicwebsite\node_modules\webpack\lib\NormalModule.js:316:20
    at C:\xampp\htdocs\basicwebsite\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\xampp\htdocs\basicwebsite\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at runSyncOrAsync (C:\xampp\htdocs\basicwebsite\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
    at iterateNormalLoaders (C:\xampp\htdocs\basicwebsite\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at C:\xampp\htdocs\basicwebsite\node_modules\loader-runner\lib\LoaderRunner.js:205:4
    at C:\xampp\htdocs\basicwebsite\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:85:15
    at processTicksAndRejections (internal/process/task_queues.js:79:11)

 error  in ./resources/sass/app.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:    object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (C:\xampp\htdocs\basicwebsite\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:85:11)
    at Object.loader (C:\xampp\htdocs\basicwebsite\node_modules\sass-loader\dist\index.js:36:28)

 @ ./resources/sass/app.scss 2:14-252

     Asset      Size   Chunks             Chunk Names /js/app.js  2.05 MiB  /js/app  [emitted]  /js/app

ERROR in ./resources/sass/app.scss Module build failed (from ./node_modules/css-loader/index.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:    object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (C:\xampp\htdocs\basicwebsite\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:85:11)
    at Object.loader (C:\xampp\htdocs\basicwebsite\node_modules\sass-loader\dist\index.js:36:28)
    at C:\xampp\htdocs\basicwebsite\node_modules\webpack\lib\NormalModule.js:316:20
    at C:\xampp\htdocs\basicwebsite\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\xampp\htdocs\basicwebsite\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at runSyncOrAsync (C:\xampp\htdocs\basicwebsite\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
    at iterateNormalLoaders (C:\xampp\htdocs\basicwebsite\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at C:\xampp\htdocs\basicwebsite\node_modules\loader-runner\lib\LoaderRunner.js:205:4
    at C:\xampp\htdocs\basicwebsite\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:85:15
    at processTicksAndRejections (internal/process/task_queues.js:79:11)  @ ./resources/sass/app.scss

ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./resources/sass/app.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:    object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (C:\xampp\htdocs\basicwebsite\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:85:11)
    at Object.loader (C:\xampp\htdocs\basicwebsite\node_modules\sass-loader\dist\index.js:36:28) @ ./resources/sass/app.scss 2:14-252 npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules
--config=node_modules/laravel-mix/setup/webpack.config.js` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ development 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\Andrew Glenny\AppData\Roaming\npm-cache\_logs20-02-16T16_06_55_949Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ dev: `npm run development` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ dev 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\Andrew Glenny\AppData\Roaming\npm-cache\_logs20-02-16T16_06_55_997Z-debug.log

This is the contents of my index.js:

/*
    MIT License http://www.opensource.org/licenses/mit-license.php
    Author Tobias Koppers @sokra
*/

module.exports = require("./lib/loader");

This is the contents of my cjs.js

"use strict";

const loader = require('./index');

module.exports = loader.default;

My app.scss is empty at present

How to&Answers: