joshpj1

joshpj1

Member Since 7 Months Ago

Experience Points
100
Total
Experience

4,900 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
0
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start-engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber-token Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer-token Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • lara-evanghelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 1
100 XP
Nov
08
1 week ago
Activity icon

Started a new Conversation Testing Vue Components With Mocha-webpack Resolution Issue

I am using vuejs in Laravel 5.7 to build an SPA. I am using mocha-webpack and vue-test-utils to write some vue component tests.

The tests can't seem to work out stylesheet imports into components. For example: I have a ExampleComponent.vue which includes the following:

</script>

<style lang="scss" scoped>

@import '@/_variables.scss';

.subpanel-control > ul > li {
    background-color: lighten($body-bg, 50);
    margin-left: 10px;
    height: 25px;
    width: 25px;
    line-height: 25px;
    color: $body-bg;
}

when running npm run test I get the following error:

Error in ./resources/assets/js/components/Panel.vue?vue&type=style&index=0&id=21f01f46&lang=scss&scoped=true&

  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

  @import '@/variables';
         ^
        Can't find stylesheet to import.
     ╷
  98 │ @import '@/variables';
     │         ^^^^^^^^^^^^^
     ╵
    stdin 98:9  root stylesheet
        in C:\Users\jjackson\Documents\projects\wave\resources\assets\js\components\Panel.vue (line 98, column 9)

I can't work out why it doesn't understand the alias @. Here is my webpack.mix.js:

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

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/nifty.scss', 'public/css', {
        implementation: require('node-sass')
    })
    .sass('resources/assets/sass/themes/type-b/theme-ocean.scss', 'public/css')
    .less('resources/assets/less/bootstrap-4-utilities.less', 'public/css')
    .webpackConfig({
        resolve: {
            alias: {
                '@': path.resolve('resources/assets/sass'),
                '~': path.resolve('resources/assets/js')
            }
        }
    })
    .sourceMaps();

if (mix.inProduction()) {
    mix.version();
}

Any help would be appreciated