Nuxt can't load stylus file












0














I am trying to load a stylus file within nuxt.



First I installed the stylus package using npm i -D stylus stylus-loader



Then I created a file called app.styl in the assets/style folder :



@require '~vuetify/src/stylus/settings/_colors'
$theme := {
primary: $blue.darken-2
accent: $blue.accent-2
secondary: $grey.lighten-1
info: $blue.lighten-1
warning: $amber.darken-2
error: $red.accent-4
success: $green.lighten-2
}

// Import Vuetify styling
@require '~vuetify/src/stylus/main'

.page
@extend .fade-transition


Then I added this to the css array in nuxt.config.js :



  /*
** Global CSS
*/
css: [{ src: '~assets/style/app.styl', lang: 'styl'}],


But then nuxt.js is throwing an error in build :



× error friendly-errors » Failed to compile with 1 errors
> log friendly-errors » This dependency was not found:
> log friendly-errors » * ..assetsstyleapp.styl in ./.nuxt/App.js
> log friendly-errors » To install it, you can run: npm install --save ..assetsstyleapp.styl


In my package.json I have the version of nuxt to ^2.3.1, stylus to ^0.54.5 and stylus-loader of ^3.0.2.



Full link to package.json and nuxt.config.js



Can you find what is wrong with my setup using these informations ?










share|improve this question



























    0














    I am trying to load a stylus file within nuxt.



    First I installed the stylus package using npm i -D stylus stylus-loader



    Then I created a file called app.styl in the assets/style folder :



    @require '~vuetify/src/stylus/settings/_colors'
    $theme := {
    primary: $blue.darken-2
    accent: $blue.accent-2
    secondary: $grey.lighten-1
    info: $blue.lighten-1
    warning: $amber.darken-2
    error: $red.accent-4
    success: $green.lighten-2
    }

    // Import Vuetify styling
    @require '~vuetify/src/stylus/main'

    .page
    @extend .fade-transition


    Then I added this to the css array in nuxt.config.js :



      /*
    ** Global CSS
    */
    css: [{ src: '~assets/style/app.styl', lang: 'styl'}],


    But then nuxt.js is throwing an error in build :



    × error friendly-errors » Failed to compile with 1 errors
    > log friendly-errors » This dependency was not found:
    > log friendly-errors » * ..assetsstyleapp.styl in ./.nuxt/App.js
    > log friendly-errors » To install it, you can run: npm install --save ..assetsstyleapp.styl


    In my package.json I have the version of nuxt to ^2.3.1, stylus to ^0.54.5 and stylus-loader of ^3.0.2.



    Full link to package.json and nuxt.config.js



    Can you find what is wrong with my setup using these informations ?










    share|improve this question

























      0












      0








      0







      I am trying to load a stylus file within nuxt.



      First I installed the stylus package using npm i -D stylus stylus-loader



      Then I created a file called app.styl in the assets/style folder :



      @require '~vuetify/src/stylus/settings/_colors'
      $theme := {
      primary: $blue.darken-2
      accent: $blue.accent-2
      secondary: $grey.lighten-1
      info: $blue.lighten-1
      warning: $amber.darken-2
      error: $red.accent-4
      success: $green.lighten-2
      }

      // Import Vuetify styling
      @require '~vuetify/src/stylus/main'

      .page
      @extend .fade-transition


      Then I added this to the css array in nuxt.config.js :



        /*
      ** Global CSS
      */
      css: [{ src: '~assets/style/app.styl', lang: 'styl'}],


      But then nuxt.js is throwing an error in build :



      × error friendly-errors » Failed to compile with 1 errors
      > log friendly-errors » This dependency was not found:
      > log friendly-errors » * ..assetsstyleapp.styl in ./.nuxt/App.js
      > log friendly-errors » To install it, you can run: npm install --save ..assetsstyleapp.styl


      In my package.json I have the version of nuxt to ^2.3.1, stylus to ^0.54.5 and stylus-loader of ^3.0.2.



      Full link to package.json and nuxt.config.js



      Can you find what is wrong with my setup using these informations ?










      share|improve this question













      I am trying to load a stylus file within nuxt.



      First I installed the stylus package using npm i -D stylus stylus-loader



      Then I created a file called app.styl in the assets/style folder :



      @require '~vuetify/src/stylus/settings/_colors'
      $theme := {
      primary: $blue.darken-2
      accent: $blue.accent-2
      secondary: $grey.lighten-1
      info: $blue.lighten-1
      warning: $amber.darken-2
      error: $red.accent-4
      success: $green.lighten-2
      }

      // Import Vuetify styling
      @require '~vuetify/src/stylus/main'

      .page
      @extend .fade-transition


      Then I added this to the css array in nuxt.config.js :



        /*
      ** Global CSS
      */
      css: [{ src: '~assets/style/app.styl', lang: 'styl'}],


      But then nuxt.js is throwing an error in build :



      × error friendly-errors » Failed to compile with 1 errors
      > log friendly-errors » This dependency was not found:
      > log friendly-errors » * ..assetsstyleapp.styl in ./.nuxt/App.js
      > log friendly-errors » To install it, you can run: npm install --save ..assetsstyleapp.styl


      In my package.json I have the version of nuxt to ^2.3.1, stylus to ^0.54.5 and stylus-loader of ^3.0.2.



      Full link to package.json and nuxt.config.js



      Can you find what is wrong with my setup using these informations ?







      nuxt.js stylus






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 21 '18 at 22:28









      Léo ColettaLéo Coletta

      51110




      51110
























          1 Answer
          1






          active

          oldest

          votes


















          0














          Nuxt asset folder path should be like this for nuxt js version 2



           /*
          ** Global CSS
          */
          css: [{ src: '~/assets/style/app.styl', lang: 'styl'}]


          I hope it will solve your problem






          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%2f53421331%2fnuxt-cant-load-stylus-file%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









            0














            Nuxt asset folder path should be like this for nuxt js version 2



             /*
            ** Global CSS
            */
            css: [{ src: '~/assets/style/app.styl', lang: 'styl'}]


            I hope it will solve your problem






            share|improve this answer


























              0














              Nuxt asset folder path should be like this for nuxt js version 2



               /*
              ** Global CSS
              */
              css: [{ src: '~/assets/style/app.styl', lang: 'styl'}]


              I hope it will solve your problem






              share|improve this answer
























                0












                0








                0






                Nuxt asset folder path should be like this for nuxt js version 2



                 /*
                ** Global CSS
                */
                css: [{ src: '~/assets/style/app.styl', lang: 'styl'}]


                I hope it will solve your problem






                share|improve this answer












                Nuxt asset folder path should be like this for nuxt js version 2



                 /*
                ** Global CSS
                */
                css: [{ src: '~/assets/style/app.styl', lang: 'styl'}]


                I hope it will solve your problem







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 22 '18 at 0:34









                HasanHasan

                11319




                11319






























                    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%2f53421331%2fnuxt-cant-load-stylus-file%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

                    404 Error Contact Form 7 ajax form submitting

                    How to know if a Active Directory user can login interactively

                    TypeError: fit_transform() missing 1 required positional argument: 'X'