Компонент Webpack Vue с тегами css <style>не может быть собран с ошибкой синтаксического анализа модуля: неожиданный токен - PullRequest
Новая
       22

Компонент Webpack Vue с тегами css <style>не может быть собран с ошибкой синтаксического анализа модуля: неожиданный токен

0 голосов
/ 26 мая 2020

Начиная с чистого проекта vue, у меня возникли проблемы со сборкой. vue компонентов из Prime 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

Это мой файл конфигурации веб-пакета: 

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()
    ]
};

Что вызывает эту ошибку, поскольку я правильно импортирую компоненты, как указано в документации Prime Vue.

Ответы [ 2 ]

0 голосов
/ 26 мая 2020

Я настоятельно рекомендую кэшировать файлы. vue, потому что они замедляют время сборки в больших проектах. 

// snippet from https://github.com/unic/darvin-webpack-boilerplate/blob/master/webpack/settings/javascript-vue/index.js

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

const path = require('path');
const ROOT_PATH = process.cwd();

const CACHE_PATH = path.join(ROOT_PATH, 'tmp/cache');

const VUE_VERSION = require('vue/package.json').version;
const VUE_LOADER_VERSION = require('vue-loader/package.json').version;

const dev = {
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                cacheDirectory: path.join(CACHE_PATH, 'vue-loader'),
                cacheIdentifier: [
                    process.env.NODE_ENV || 'development',
                    webpack.version,
                    VUE_VERSION,
                    VUE_LOADER_VERSION,
                ].join('|'),
            },
        }
    ]
},
plugins: [
    new VueLoaderPlugin(),
],
resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['.js', '.vue', '.json'],
    },
};
0 голосов
/ 26 мая 2020

Установка правила в конфигурации 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 установлены в пакете. json.

Дополнительную информацию можно найти в руководстве раздел установки документации vue -loader, в частности пример кода под 'Более полный пример конфигурации webpack будет выглядеть так.'

...