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
This turned out to be a docker problem. Was trying to run npm run dev
outside of the docker environment, and it was causing this error. When I ran all npm commands inside of the container everything worked fine