Vue webpack build - Не удалось.Вам может понадобиться соответствующий загрузчик для обработки этого типа файла

Question

Кажется, я не могу собрать свой проект Vue из отдельных файловых компонентов, если в файле .vue есть стиль.

Он успешно создается без тега стиля.Но выдает ошибку, как только я добавлю стиль.

ERROR in ./src/Martins.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./src/Martins.vue?vue&type=style&index=0&lang=css&) 9:0

Module parse failed: Unexpected token (9:0)
You may need an appropriate loader to handle this file type.

> .martins {
|     border: 1px solid black;
|     border-radius: 5px;
 @ ./src/Martins.vue?vue&type=style&index=0&lang=css& 1:0-127 1:143-146 1:148-272 1:148-272
 @ ./src/Martins.vue

Вот мой конфиг веб-пакета

const VueLoaderPlugin = require('vue-loader/lib/plugin');

const config = {
  ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,  
        include: /node_modules/,  
        loaders: ['style-loader', 'css-loader'],
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.vue'
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

module.exports = config;

Вот мой конфиг веб-пакета

  "dependencies": {
    "css-loader": "^2.1.1",
    "style-loader": "^0.23.1",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "babel-loader": "^8.0.5",
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2"
  }

И вот компоненты, где он выходит из строя

<template>
  <div>
    My name is <span class="martins">Martin</span>
  </div>
</template>

<style lang="css">
    .martins {
        border: 1px solid black;
        border-radius: 5px;
        padding: 4px;
        margin: 4px;
    }
</style>

Answer 1

Похоже, вам нужен другой загрузчик стилей для шаблонов vue.

Взято из их документации

Примечание : вам может понадобитьсяустановите эту зависимость vue-style-loader

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

      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }