karateka's avatar

Where are SASS files compiled by Mix

Hi, I have strange problem. I use Mix to compile SASS to CSS. I change source and output in webpack.mix.js

mix.sass('resources/views/assets/sass/app.scss', 'resources/views/assets/css/style.css');

And now is my problem. After compile style works but I don't style.css is blank.I don't know where is css file with compiled sass code.

0 likes
2 replies
ejdelmonico's avatar

As tisuchi stated, Laravel looks to the public directory for assets to serve unless you customize the paths. The preferred way of using mix.sass() is to import all necessary files and fonts (I usually link to the fonts in the index.html page) that you require into app.scss (or whatever you want to call it). Then you run:

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

along with the rest of your mix tasks. You reference the assets in your layout as:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Laravel</title>

        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    </head>
    <body>
        <div id="app">
            <example></example>
        </div>

        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

Please or to participate in this conversation.