我在 Laravel 5.7 中使用 vuejs 来构建一个 SPA。我正在使用 mocha-webpack 和 vue-test-utils 编写一些 vue 组件测试。
测试似乎无法将样式表导入组件。例如:我有一个 ExampleComponent.vue,其中包括以下内容:
</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;
}
运行时npm run test
出现以下错误:
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)
我不知道为什么它不理解别名@。这是我的 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();
}
任何帮助,将不胜感激