Webpack. Для работы с этим типом файлов вам может потребоваться соответствующий загрузчик с sue

Я создал свой проект с помощью Webpack и использовал Vue.js в разработке, но я не могу вставить <style> в шаблон Vue.

Это достало меня

Module parse failed: Unexpected token (18:5)
You may need an appropriate loader to handle this file type.
| 
| 
> body {
|   background-color: red;
| }

это мой webpack.config.js

  ...
  module: {
    rules: [{
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["@babel/preset-env"]
        }
      },
    ]
  },

а также мой App.vue

<template>
  <div id="app">
    <counter></counter>
  </div>
</template>

<script>
import Counter from "./app/Counter.vue";
export default {
  name: "app",
  components: {
    counter: Counter
  }
};
</script>

<style>
body {
  background-color: red;
}
</style>

webpack vue.js vue-loader css-loader
person Pakanon Pantisawat    schedule 12.06.2018    source источник
comment
Какая версия vue-loader используется?   -  person raina77ow    schedule 12.06.2018
comment
@ raina77ow мой cue-loader - версия 15.2.4   -  person Pakanon Pantisawat    schedule 12.06.2018

Ответы (1)


arrow_upward
25
arrow_downward

Была такая же проблема. Для просмотра документации по vue-loader css тоже нужны правила.

Установите пакеты vue-style-loader и css-loader

Добавьте следующее в свой rules раздел в webpack.config.js:

  {
    test: /\.css$/,
    use: [
      'vue-style-loader',
      'css-loader'
    ]
  },
person joe    schedule 13.06.2018
comment
Я не понимаю, почему это не задокументировано где-то в доменах Typescript, Vue или GitHub / vue-loader. Потратил ваааай на то, чтобы долго искать это решение. - person monkeydeus; 21.02.2019
comment
То же самое. Слишком много времени потратил на поиски этого. Просмотрено множество проблем с git, другие вопросы о stackoverflow, и вот что наконец сработало. - person Diego Lima; 24.03.2020