模块解析失败：意外字符 '@' (1:0) vuejs 、 vuetify 和 vuex答案

【问题标题】：Module parse failed: Unexpected character '@' (1:0) vuejs , vuetify and vuex模块解析失败：意外字符 '@' (1:0) vuejs 、 vuetify 和 vuex
【发布时间】：2019-10-27 23:46:36
【问题描述】：

在添加/集成 Vuetify 时出错，例如从 main.js 中的 'vuetify/lib' Vue.use(Vuetify) 导入 Vuetify

错误：

ERROR in ./node_modules/vuetify/src/stylus/components/_grid.styl
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| .    @import '../bootstrap'

main.js

import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)

【问题讨论】：

标签： vue.js webpack vuex vuetify.js

【解决方案1】：

我们需要在 webpack（webpack.config.js 或 webpack.js 或 webpack.base.js）中配置 loader

webpack.base.js

 .......other config

 module: {
   rules: [
       {
         test: /\.styl$/,
        loader: ['css-loader', 'stylus-loader']
      },

    .....other loaders
   ]
 }

 ....other config

安装加载器

 npm i stylus-loader  css-loader --save-dev

【讨论】：

【解决方案2】：

这对我有用。您可以将其添加到您的角色中。

{
        test: /\.styl$/,
        loader: ['style-loader', 'css-loader', 'stylus-loader']
},

【讨论】：