本文介绍了错误：您可能需要额外的加载器来处理这些加载器的结果。&q；的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在和Vue.js和webpack一起开发一个网页。当我在单个文件组件Curry.vue中编写样式时，构建失败。
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.tomato {
color: red;
}
</style>
错误消息为：
ERROR in ./src/components/Curry.vue?vue&type=style&index=0&id=4d934a99&scoped=true&lang=css& (./node_modules/vuetify-loader/lib/loader.js??ref--7-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Curry.vue?vue&type=style&index=0&id=4d934a99&scoped=true&lang=css&) 12:0
Module parse failed: Unexpected token (12: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.
|
|
> .tomato {
| color: red;
| }
@ ./src/components/Curry.vue?vue&type=style&index=0&id=4d934a99&scoped=true&lang=css& 1:0-209 1:225-228 1:230-436 1:230-436
@ ./src/components/Curry.vue
@ ./src/index.js
webpack.config.js为：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
mode: 'development',
entry: path.join(__dirname, 'src', 'index'),
watch: true,
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/dist/',
filename: "bundle.js",
chunkFilename: '[name].js'
},
plugins:[
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new VueLoaderPlugin(),
new VuetifyLoaderPlugin()
],
module: {
rules: [
{
test:/.vue$/,
use:['vue-loader']
},
{
test: /.jsx?$/,
include: [
path.resolve(__dirname, 'src')
],
exclude: [
path.resolve(__dirname, 'node_modules')
],
loader: 'babel-loader',
query: {
presets: [
["@babel/env", {
"targets": {
"browsers": "last 2 chrome versions"
}
}]
]
}
},
{
test: /.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader@^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader@^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
]
},
resolve: {
extensions: ['.json', '.js', '.jsx', '.vue'],
alias:{
'@': path.resolve('src'),
}
},
devtool: 'source-map',
devServer: {
contentBase: path.join(__dirname, '/dist/'),
inline: true,
host: 'localhost',
port: 8080,
}
};
推荐答案
您需要为css添加规则，您当前的scss规则不适用于css。
只需为CSS添加其他规则：
// webpack.config.js
module.exports = {
...
module: {
rules: [
...
{
test: /.css$/,
use: [
'vue-style-loader',
'css-loader',
]
}
...
]
...
};
这篇关于错误：您可能需要额外的加载器来处理这些加载器的结果。&q；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！