当我试图使用webpack编译我的VueJS代码时(特别是这个(：
<template>
<v-app-bar app color="blue" flat height="100px">
<v-img
class="mx-2"
contain
max-height="80"
max-width="80"
:src="require('@/assets/images/logos/marble-dark-logo.png').default"
alt="logo"
></v-img>
<v-toolbar-title class="ml-4"><h2>Marble</h2></v-toolbar-title>
<v-spacer></v-spacer>
<v-btn outlined x-large>
Sign In
</v-btn>
<v-btn class="ml-5" dark color="#363f44" x-large depressed>
Contact Us
</v-btn>
</v-app-bar>
</template>
<script>
export default {
name: 'Navbar',
data: () => ({}),
methods: {}
}
</script>
<style scoped>
.logo {
border-radius: 10px;
}
</style>
我收到这个错误
Module parse failed: Unexpected token (29:0)
File was processed with these loaders:
* ./node_modules/vuetify-loader/lib/loader.js
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .logo {
| border-radius: 10px;
| }
@ ./src/components/Navbar.vue?vue&type=style&index=0&id=41458b80&scoped=true&lang=css& 1:0-211 1:227-230 1:232-440 1:232-440
@ ./src/components/Navbar.vue
@ ./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js??ref--8-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
@ ./src/App.vue?vue&type=script&lang=js&
@ ./src/App.vue
@ ./src/main.js
这是我的webpack.config.js和package.json:
{
"name": "landing",
"version": "1.0.0",
"scripts": {
"dev": "webpack-dev-server --open --hot --config ./build/webpack.config.js",
"build": "webpack --mode production --progress --hide-modules --config ./build/webpack.config.js"
},
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.5.2",
"deepmerge": "^4.2.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.1",
"eslint-config-standard": "^14.1.1",
"eslint-friendly-formatter": "^4.0.1",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-html": "^6.0.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2",
"fibers": "^4.0.2",
"file-loader": "^6.0.0",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.4",
"vue-loader": "^15.9.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.4.3",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuetify": "^2.2.22"
}
}
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, "./dist"),
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'public'),
historyApiFallback: true
},
module: {
rules: [
{
test: /.vue$/,
loader: "vue-loader"
},
{
test: /.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader@^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
{
test: /.js$/,
loader: "babel-loader",
exclude: /node_modules/
},
{
test: /.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
]
},
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js",
'@': path.resolve('src')
},
extensions: ["*", ".js", ".vue", ".json"]
},
plugins: [
new VueLoaderPlugin(),
new VuetifyLoaderPlugin(),
new CopyPlugin([{ from: './public' }])
]
}
我已经看了几个小时了，并试图看看我是否滥用了加载程序或在webpack中错误地设置了它们？
我也遇到了同样的问题，删除了默认的css加载程序并替换它为我解决了这个问题。我使用的是Rails环境，所以我的配置看起来有点不同，但下面是相关的片段：
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
environment.loaders.delete('css')
environment.loaders.append('css', {
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
});