gpt4 book ai didi

vue.js - 带有 css <style> 标签的 Webpack Vue 组件无法构建,模块解析失败 : Unexpected token

转载 作者:行者123 更新时间:2023-12-05 02:07:14 27 4
gpt4 key购买 nike

从一个干净的 vue 项目开始,我在从 PrimeVue 构建 .vue 组件时遇到了问题。这些是现成的组件,应该不会构建失败。

每次我尝试构建时,它都失败了,而且似乎在 CSS 样式的开头出现了行指针失败。

ERROR in ./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css&) 340:0
Module parse failed: Unexpected token (340:0)
File was processed with these loaders:
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .p-slider {
| position: relative;
| }
@ ./node_modules/primevue/components/slider/Slider.vue?vue&type=style&index=0&lang=css& 1:0-119 1:135-138 1:140-256 1:140-256
@ ./node_modules/primevue/components/slider/Slider.vue
@ ./node_modules/primevue/slider.js
@ ./myproject/components/Test.js
@ ./myproject/components/App.js
@ ./myproject/main.js

这是我的 webpack 配置文件:

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
mode: 'development',
entry: 'main.js',
output: {
filename: 'main.bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
};

是什么导致了这个错误,因为我正在按照 PrimeVue 文档的说明正确导入组件。

最佳答案

在 webpack 配置中设置一个规则来发送 .vue处理文件到 vue-loader还不够。

您需要指定如何处理.css文件,然后将其应用于 .vue 中的标签文件也是如此。没有这条规则,它将不知道如何处理 <style>。 block ,即使您不打算使用其中的 .css 文件部分。

更新 webpack.config.js 的规则部分具有以下内容:

rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]

还要确保 vue-style-loadercss-loader安装在 package.json 中。

更多信息可以在 manual installation section 找到vue-loader 文档的一部分,特别是 'A more complete example webpack config will look like this.' 下的代码示例。

关于vue.js - 带有 css &lt;style&gt; 标签的 Webpack Vue 组件无法构建,模块解析失败 : Unexpected token,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62019773/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com