具有CSS< style>的Webpack Vue组件标记无法通过模块解析失败生成:意外令牌 [英] Webpack Vue component with css <style> tags fails to build with Module parse failed: Unexpected token
问题描述
从一个干净的vue项目开始,我遇到了从PrimeVue构建.vue组件的问题. 这些都是现成的组件,真的应该不会失败.
Starting with a clean vue project, I was having issues building .vue components from PrimeVue. These are ready made components and should really not fail to build.
每次尝试构建时,它都不会这样做,并且似乎在CSS样式的开头出现了行指针失败.
Everytime I try to build, it fails to do so, and seems to fail with the line pointer at the start of the CSS styles.
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配置文件:
This is my webpack config file:
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文档中的说明正确导入了组件.
What is causing this error, as I am importing the components correctly as stated by the PrimeVue documentation.
推荐答案
在webpack配置中设置规则以将.vue
文件发送到vue-loader
进行处理是不够的.
Setting a rule in the webpack config to send the .vue
files for processing to vue-loader
is not enough.
您还需要指定如何处理.css
文件,然后将其也应用于.vue
文件中的标签.没有此规则,即使您不打算使用此.css文件部分,它也将不知道如何处理<style>
块.
You need to specify how to handle .css
files too, and this then gets applied to tags in a .vue
file as well. Without this rule, it will not know what to do with the <style>
blocks, even if you dont plan on using the .css file part of this.
使用以下命令更新webpack.config.js
的规则部分:
Update the rules section of the webpack.config.js
with the following:
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-loader
和css-loader
安装在package.json中.
Also make sure that vue-style-loader
and css-loader
are installed in package.json.
更多信息,请参见vue-loader文档,特别是下的代码示例'一个更完整的webpack配置示例将如下所示.'
More information can be found at the manual installation section of the vue-loader documentation, specifically the code example under 'A more complete example webpack config will look like this.'
这篇关于具有CSS< style>的Webpack Vue组件标记无法通过模块解析失败生成:意外令牌的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!