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>

解决方法

有同样的问题.查看 vue-loader css的文档也需要规则.

安装包vue-style-loader和css-loader

将以下内容添加到webpack.config.js中的rules部分：

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