CSS not loading: fresh installation

[ErSoul]

I have followed the installation section of the official documentation, without any error messages, except some warnings when running yarn run dev:

$ npm run development
                                                                                   > @ development C:\Users\computer\Documents\php-projects\vaniloapp
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
                                                                                   The system cannot find the path specified.                                                 Additional dependencies must be installed. This will only take a moment.
        Running: npm install vue-template-compiler --save-dev --production=false
npm WARN rm not removing C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\.bin\regjsparser.cmd as it wasn't installed by C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\regjsparser
npm WARN rm not removing C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\.bin\regjsparser as it wasn't installed by C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\regjsparser
npm WARN rm not removing C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\.bin\json5.cmd as it wasn't installed by C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\json5
npm WARN rm not removing C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\.bin\json5 as it wasn't installed by C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\json5
npm WARN rm not removing C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\.bin\jsesc.cmd as it wasn't installed by C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\jsesc
npm WARN rm not removing C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\.bin\jsesc as it wasn't installed by C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\jsesc
npm WARN rm not removing C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\.bin\cssesc.cmd as it wasn't installed by C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\cssesc
npm WARN rm not removing C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\.bin\cssesc as it wasn't installed by C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\cssesc
npm notice created a lockfile as package-lock.json. You should commit this file.
        Okay, done. The following packages have been installed and saved to your package.json dependencies list:

        - vue-template-compiler

The system cannot find the path specified.
        Additional dependencies must be installed. This will only take a moment.

        Running: npm install sass-loader@7.* sass resolve-url-loader@2.3.1 --save-dev --production=false

npm WARN deprecated resolve-url-loader@2.3.1: package is bloated with temp files (fixed in 2.3.2)
npm WARN sass-loader@7.1.0 requires a peer of webpack@^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

The final result when going to the url http://127.0.0.1:8000/admin/customer is:

I'm on windows 10, composer version is: 1.8.0 2018-12-03 10:31:16; php version is 7.2.10

[fulopattila122]

As far as I see from your command output, you're running npm instead of yarn.

[ErSoul]

That happen automatically. I type in the command prompt yarn run dev, and then it shows that.

[fulopattila122]

Does the solution described here solve the problem: https://github.com/webpack-contrib/sass-loader/issues/563 ?

[ErSoul]

Negative. I tried yarn remove node-sass, and then yarn install node-sass and it didn't work.

Then I tried as the post suggest npm rebuild node-sass, and dropped the following output:

npm rebuild node-sass

> node-sass@4.11.0 install C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\node-sass
> node scripts/install.js

node-sass build Binary found at C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\node-sass\vendor\win32-x64-57\binding.node

> node-sass@4.11.0 postinstall C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
node-sass@4.11.0 C:\Users\computer\Documents\php-projects\vaniloapp\node_modules\node-sass

It didn't have any effect.

[fulopattila122]

If you create a new Laravel project, can you compile its assets?

composer create-project --prefer-dist laravel/laravel testproject
cd testproject
npm install
npm run dev

Does this work?

[ErSoul]

For a new project it seems that it works. This is my output:

C:\Users\computer\Documents\php-projects\testproject>npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 946 packages in 173.973s

C:\Users\computer\Documents\php-projects\testproject>npm run dev

> @ dev C:\Users\computer\Documents\php-projects\testproject
> npm run development

> @ development C:\Users\computer\Documents\php-projects\testproject
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

The system cannot find the path specified.
        Additional dependencies must be installed. This will only take a moment.

        Running: npm install vue-template-compiler --save-dev --production=false

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

        Okay, done. The following packages have been installed and saved to your package.json dependencies list:

        - vue-template-compiler

 98% after emitting SizeLimitsPlugin

 DONE  Compiled successfully in 10734ms                                                                         13:01:25
                                                                                           Asset      Size   Chunks             Chunk Names
/css/app.css   174 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.37 MiB  /js/app  [emitted]  /js/app