YTB's avatar
Level 1

How to use the .scss files of a Template I bought? // Laravel Mix

Hi everyone,

I bought a template on TemplateMonster and I have a sass resources folder with all the scss files of the design. I wanted to begin to use Laravel Mix. I finally solved some installation problem due to Homestead and "npm install" and now, I wanted to know how to proceed?

How to "add" the .scss files of the template to my Laravel Project? How to compile it for the first time? Which parameters are really important?

I read the documentation of Laravel Mix and some tutorials but I'm not sure to have understood well...

/ / / / / EDIT / / / / /

What I did...

I put the scss files in the resources/assets/sass folder, I ran npm run dev and get hundred of red error lines and the following errors too :

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "development"
npm ERR! node v6.11.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
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 '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! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     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! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\admin\Projects\MyProject\npm-debug.log

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dev"
npm ERR! node v6.11.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script 'npm run development'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run development
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\admin\Projects\MyProject\npm-debug.log

Thanks,

YTB

0 likes
3 replies
mushood's avatar

in your webpack.mix.js , did you put the following:

mix..sass('resources/assets/sass/YourFile.scss', 'public/css');

This is how you compile it.

Now for the error you are getting. Try to run npm -v if it is not the latest version, try to update to the latest version and try again.

Check your node version as well: node -v

YTB's avatar
Level 1

Hi,

Yes, I have this line and everything is up to date...

YTB's avatar
YTB
OP
Best Answer
Level 1

Hi,

No magic solution for this problem: I needed to solve each bug one by one, the most of them due to wrong link in the installation and in the template scss files...

Please or to participate in this conversation.