Where do I place my css files in Laravel?












0















I understand I can make changes to resources/assets/sass/app.scss in my Laravel projects and the changes will be reflected after running npm run dev or npm run watch.



But what do I do when I have a dozen .css files? Where do I place them and how do I compile them?



I have looked through the documentation and quite a few Laracasts videos and have not found an answer.



The documentation states




Again, like the less method, you may compile multiple Sass files into >their own respective CSS files and even customize the output directory >of the resulting CSS:



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




So does this mean if I have an admin.css file I would rename it to admin.scss and place it in the sass directory? Then behind the scenes Laravel would compile that and place it in public/css/admin? So each .css file needs to become an .scss file and I have to list each one in webpack.mix.js?



This may be really simple but I've spent many hours trying to understand.






css laravel







share|improve this question


















  • 1





    That's right. Convert them to .scss files. You can also keep one main app.scss that will import all the other .scss files. By the way, you could just import the css files as they are, but that wouldn't be really a good idea if you plan on working with those files later on. It would be best to have a good .scss workflow in place.

    – Mozammil
    Dec 29 '18 at 18:31


















0















I understand I can make changes to resources/assets/sass/app.scss in my Laravel projects and the changes will be reflected after running npm run dev or npm run watch.



But what do I do when I have a dozen .css files? Where do I place them and how do I compile them?



I have looked through the documentation and quite a few Laracasts videos and have not found an answer.



The documentation states




Again, like the less method, you may compile multiple Sass files into >their own respective CSS files and even customize the output directory >of the resulting CSS:



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




So does this mean if I have an admin.css file I would rename it to admin.scss and place it in the sass directory? Then behind the scenes Laravel would compile that and place it in public/css/admin? So each .css file needs to become an .scss file and I have to list each one in webpack.mix.js?



This may be really simple but I've spent many hours trying to understand.






css laravel







share|improve this question


















  • 1





    That's right. Convert them to .scss files. You can also keep one main app.scss that will import all the other .scss files. By the way, you could just import the css files as they are, but that wouldn't be really a good idea if you plan on working with those files later on. It would be best to have a good .scss workflow in place.

    – Mozammil
    Dec 29 '18 at 18:31
















0












0








0








I understand I can make changes to resources/assets/sass/app.scss in my Laravel projects and the changes will be reflected after running npm run dev or npm run watch.



But what do I do when I have a dozen .css files? Where do I place them and how do I compile them?



I have looked through the documentation and quite a few Laracasts videos and have not found an answer.



The documentation states




Again, like the less method, you may compile multiple Sass files into >their own respective CSS files and even customize the output directory >of the resulting CSS:



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




So does this mean if I have an admin.css file I would rename it to admin.scss and place it in the sass directory? Then behind the scenes Laravel would compile that and place it in public/css/admin? So each .css file needs to become an .scss file and I have to list each one in webpack.mix.js?



This may be really simple but I've spent many hours trying to understand.






css laravel







share|improve this question














I understand I can make changes to resources/assets/sass/app.scss in my Laravel projects and the changes will be reflected after running npm run dev or npm run watch.



But what do I do when I have a dozen .css files? Where do I place them and how do I compile them?



I have looked through the documentation and quite a few Laracasts videos and have not found an answer.



The documentation states




Again, like the less method, you may compile multiple Sass files into >their own respective CSS files and even customize the output directory >of the resulting CSS:



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




So does this mean if I have an admin.css file I would rename it to admin.scss and place it in the sass directory? Then behind the scenes Laravel would compile that and place it in public/css/admin? So each .css file needs to become an .scss file and I have to list each one in webpack.mix.js?



This may be really simple but I've spent many hours trying to understand.






css laravel




css laravel






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Dec 29 '18 at 18:13









QuantrillQuantrill

254




254








  • 1





    That's right. Convert them to .scss files. You can also keep one main app.scss that will import all the other .scss files. By the way, you could just import the css files as they are, but that wouldn't be really a good idea if you plan on working with those files later on. It would be best to have a good .scss workflow in place.

    – Mozammil
    Dec 29 '18 at 18:31
















  • 1





    That's right. Convert them to .scss files. You can also keep one main app.scss that will import all the other .scss files. By the way, you could just import the css files as they are, but that wouldn't be really a good idea if you plan on working with those files later on. It would be best to have a good .scss workflow in place.

    – Mozammil
    Dec 29 '18 at 18:31










1




1





That's right. Convert them to .scss files. You can also keep one main app.scss that will import all the other .scss files. By the way, you could just import the css files as they are, but that wouldn't be really a good idea if you plan on working with those files later on. It would be best to have a good .scss workflow in place.

– Mozammil
Dec 29 '18 at 18:31







That's right. Convert them to .scss files. You can also keep one main app.scss that will import all the other .scss files. By the way, you could just import the css files as they are, but that wouldn't be really a good idea if you plan on working with those files later on. It would be best to have a good .scss workflow in place.

– Mozammil
Dec 29 '18 at 18:31














1 Answer
1






active

oldest

votes


















1














You can place the CSS files where ever you want. But the best practice is create a css/ folder in public directory and put all your css files in that folder. then use tag to include css files.



If you have multiple files like admin.css , user.css etc. you can simply create a styles.css file and use @import statement to include all other css files in one file. Then it is enough to link only the styles.css file to any blade file you like.



I hope this may help you.



For any doubts leave comment.






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53972151%2fwhere-do-i-place-my-css-files-in-laravel%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    You can place the CSS files where ever you want. But the best practice is create a css/ folder in public directory and put all your css files in that folder. then use tag to include css files.



    If you have multiple files like admin.css , user.css etc. you can simply create a styles.css file and use @import statement to include all other css files in one file. Then it is enough to link only the styles.css file to any blade file you like.



    I hope this may help you.



    For any doubts leave comment.






    share|improve this answer




























      1














      You can place the CSS files where ever you want. But the best practice is create a css/ folder in public directory and put all your css files in that folder. then use tag to include css files.



      If you have multiple files like admin.css , user.css etc. you can simply create a styles.css file and use @import statement to include all other css files in one file. Then it is enough to link only the styles.css file to any blade file you like.



      I hope this may help you.



      For any doubts leave comment.






      share|improve this answer


























        1












        1








        1







        You can place the CSS files where ever you want. But the best practice is create a css/ folder in public directory and put all your css files in that folder. then use tag to include css files.



        If you have multiple files like admin.css , user.css etc. you can simply create a styles.css file and use @import statement to include all other css files in one file. Then it is enough to link only the styles.css file to any blade file you like.



        I hope this may help you.



        For any doubts leave comment.






        share|improve this answer













        You can place the CSS files where ever you want. But the best practice is create a css/ folder in public directory and put all your css files in that folder. then use tag to include css files.



        If you have multiple files like admin.css , user.css etc. you can simply create a styles.css file and use @import statement to include all other css files in one file. Then it is enough to link only the styles.css file to any blade file you like.



        I hope this may help you.



        For any doubts leave comment.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 29 '18 at 18:44









        SivaramakrishnanSivaramakrishnan

        316




        316






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53972151%2fwhere-do-i-place-my-css-files-in-laravel%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            Monofisismo

            Image
            Monofisismo (do grego: monos - "único, singular" e physis - "natureza") é o ponto de vista cristológico que defende que, depois da união do divino e do humano na encarnação histórica, Jesus Cristo, como encarnação do Filho ou Verbo ( Logos ) de Deus, teria apenas uma única "natureza", a divina, e não uma síntese de ambas. O monofisismo é contraposto pelo diofisismo (ou "diafisismo"), que defende que Jesus preservou em si as duas naturezas. Historicamente, o monofisismo se refere primordialmente à posição dos que (especialmente no Egito e, em menor grau, na Síria) rejeitaram as decisões do Concílio de Calcedônia em 451 (o quarto concílio ecumênico). Os membros mais moderados entre eles, porém, defendem a teologia "miafisita", que se tornou a oficial para as Igrejas Ortodoxas Orientais. Muitos ortodoxos orientais, porém, rejeitam essa classificação, mesmo como um termo genérico, mas ele é amplamente utilizado na literatura históri...
            Read more

            Angular Downloading a file using contenturl with Basic Authentication

            Image
            0 I have a contentUrl when user clicks on that,file should be downloaded. If I try to browse the contentUrl in the browser it asks for Userid and password.I believe this is Basic Authentication.I dont want user to enter UserId and Password so I am passing it Authorization(Please see below code). Url looks some thing like this: http://XXX.XXX.XX.XXX:8080/flowable-rest/service/runtime/tasks/90875/attachments/90555/content let username : string = 'admin'; let pwd : string = 'test'; let headers = new Headers(); headers.set('Accept', 'text/json'); headers.append('Content-Type', 'application/json'); headers.set('Access-Control-Allow-Origin', '*'); headers.set('Access-Control-Allow-Methods','POST, GET, OPTIONS, PUT, DELETE'); head...
            Read more

            Olmecas

            Image
            Monumento 1, uma das quatro cabeças colossais encontradas em La Venta, com altura aproximada de 3 metros Olmecas é a designação do povo e da civilização que estiveram na origem da antiga cultura pré-colombiana da Mesoamérica e que se desenvolveram nas regiões tropicais do centro-sul do atual México durante o pré-clássico, próximo de onde hoje estão localizados os estados mexicanos de Veracruz e Tabasco, no Istmo de Tehuantepec, numa zona designada área nuclear olmeca. A cultura olmeca floresceu nesta região aproximadamente entre 1500 e 400 a.C., [ 1 ] e crê-se que tenha sido a civilização-mãe de todas as civilizações mesoamericanas que se desenvolveram posteriormente. [ 2 ] No entanto, desconhece-se a sua exacta filiação étnica, ainda que existam numerosas hipóteses colocadas para tentar resolver esta questão. O etnónimo olmeca foi cunhado pelos arqueólogos do século XX, e não devem confundir-se com os muito posteriores olmecas-xicalancas que ocuparam vários locais do México...
            Read more