如何配置 laravel-mix 以便能够将 @material 与 vue.js 一起使用

Posted 2023-02-22

【中文标题】如何配置 laravel-mix 以便能够将 @material 与 vue.js 一起使用

【英文标题】：How to configure laravel-mix to be able to use @material with vue.js

【发布时间】：2019-09-16 11:11:28

【问题描述】：

我需要一些帮助来配置 material-web-components 以使用 vue.js 组件。当我想将一个@material 组件 scss 导入我的 vue 组件时，就会发生错误。

SomeVueComponent.js：

<style lang="scss">
    @import '@material/textfield/mdc-text-field.scss';
</style>

错误是一些@material组件导入其他@material组件scss，但由于includePaths而无法找到，我通过将此代码添加到我的laravel-mix文件中来修复：

webpack.mix.js：

mix.webpackConfig(
   module: 
       rules: [
           
               test: /\.vue$/,
               loader: 'vue-loader',
               options: 
                   loaders: 
                       scss: 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify(
                           includePaths: ['node_modules']
                       )
                   
               
           
       ]
   
);

保存此文件后，一切都正确编译，但现在我在网站上的所有 vue 组件都收到此错误：

[Vue 警告]：挂载组件失败：未定义模板或渲染函数。

经过一整天研究如何解决这个问题，我发现冲突正在产生，因为我使用 webpack 推送 vue-loader 2 次（默认一次 + 我自定义的一次）。

有没有人知道如何做到这一点的解决方法？真的很有帮助。

我正在使用：

laravel 5.7.8 laravel-mix 4.0.15 vue 2.6.10 vue-loader 15.4.2 webpack 4.27.1

我已经尝试过 vue-loader v13+ 之后引入 vue 组件的新方式。 （在require之后添加.default）还是一样的vue错误。

Vue.component('some-vue-component', require('./components/SomeVueComponent.vue').default);

【参考方案1】：

SomeVueComponent.js:

<style src="@material/textfield/mdc-text-field.scss" lang="scss"></style>

【讨论】：

嗨，这并不能解决问题，它只是导入'@material/textfield'组件scss，该组件依赖于'@material'中的其他组件，这些组件不会被导入，因为它从根目录而不是“node_modules”文件夹中查找“@material”。

【参考方案2】：

Laravel 6

webpack.mix.js：

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', 
    sassOptions: 
        includePaths:  ['./node_modules']
    
);