CODEWITHSUNDEEP
csslaravelsass
Robert
Robert

Reputation: 2691

Laravel generate css from scss I can't see changes

I have project in made Laravel. In scss file I've made changes (font-size and color) but I don't know how the css file is generated. Because I can't see changes in css file. In Laravel documentation I see that css is generated in this way: mix.sass('resources/sass/app.scss', 'public/css'); but I don't know how to run this command.

Upvotes: 0

Views: 2313

Answers (2)

Md. Amirozzaman
Md. Amirozzaman

Reputation: 1125

If you have installed node and npm in your machine and already run below command

npm install

Then you need to follow two step.

Step-1:In your project root folder,there is file name wbpack.mix.js or your/project/dir/wbpack.mix.js and you may edit this file as you want

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Step-2: After editing this file, you need to run this command 

npm run dev

with this command compiling would be start and after ending,you may reload your browser to see the changes. cntrl+F5 for fresh loading.

Otherwise download node & install it,npm will came over with node. And run first command and follow those two step.

Tip: if you changes your scss file or js constanly for the time being, you may run this command

npm run watch

Because,if you have changes in your scss and js file,you need to run over and over npm run dev to recompile your code.But if you have run npm run watch, it will automatically recompile,whenever you hit cntrl+s.

Upvotes: 1

W Kristianto
W Kristianto

Reputation: 9303

Before compiling your CSS, install your project's frontend dependencies using the Node package manager (NPM):

npm install

Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file. 

npm run dev

Upvotes: 1

Related Questions