带有 css <style> 标签的 Webpack Vue 组件无法构建，模块解析失败：意外的标记

Question

从一个干净的 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 文档的说明正确导入了组件。

Answer 1

在 webpack 配置中设置规则来发送.vue文件进行处理vue-loader是不够的。

您需要指定如何处理.css文件，然后这也将应用于.vue文件中的标签。<style>如果没有此规则，即使您不打算使用其中的 .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-loader和css-loader已安装在 package.json 中。

更多信息可以在 vue-loader 文档的手动安装部分找到，特别是“更完整的示例 webpack 配置将如下所示”下的代码示例。