前端之家

  1. 首页
  2. 问答

如何在Mocha-Webpack中解析Laravel Vue单个文件组件的别名

• 问答

我正在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();
}

任何帮助将不胜感激

lyc5748056 回答：如何在Mocha-Webpack中解析Laravel Vue单个文件组件的别名

尽管我也遇到了同样的问题，但我还是在此页面上着迷-https://github.com/vuejs/vue-cli/issues/4053和robbishop的评论，这使我找到了解决方案。 通过以上操作，我设法在webpack.mix.js中找到了一个可行的配置：

  1. 首先安装null加载程序（npm i -D null加载程序）
  2. 在规则中添加以下行：
{ test: /\.scss$/,use: [{ loader: 'null-loader' }] }

我的webpack.mix.js看起来像这样：

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean,fluent API for defining some Webpack build steps
 | for your Laravel application. By default,we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js','public/js')
    .webpackConfig({
        module: {
            rules: [
                { test: /\.scss$/,use: [{ loader: 'null-loader' }] }
            ]
        },resolve: {
            alias: {
                '@': path.resolve('somepath/sass')
            }
        }
    })
    .sass('some/path/app.scss','some/path/css');

现在在组件中包含scss导入的同时执行我的单元测试。

,

原来是码头工人问题。试图在docker环境之外运行appendTo(selector)，并导致此错误。当我在容器中运行所有npm命令时，一切工作正常

laravellaravel-mixmocha-webpackvue.js
本文链接：https://www.f2er.com/3136292.html

大家都在问