web-dev-qa-db-fra.com

Webpack Vous pouvez avoir besoin d'un chargeur approprié pour gérer ce type de fichier, avec sue

J'ai créé mon projet avec Webpack et j'utilise Vue.js en développement, mais je ne peux pas injecter <style> dans le modèle Vue.

Ça m'a eu

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

c'est mon webpack.config.js

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

et aussi mon 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>
webpackvue.jscss-loadervue-loader
7
Pakanon Pantisawat

Eu le même problème. Rechercher dans les documents pour vue-loader css a également besoin de règles.

Installez les packages vue-style-loader et css-loader

Ajoutez ce qui suit à votre section rules dans webpack.config.js:

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