Webpack：您可能需要一个适当的加载器来处理此文件类型，使用sue。

Question

我使用Webpack和Vue.js进行开发创建了我的项目，但是我无法在Vue模板中注入<style>。

这让我很困扰。

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>

- Pakanon Pantisawat

---

使用了哪个版本的vue-loader？ - raina77ow

@raina77ow 我的 cue-loader 版本是 15.2.4。 - Pakanon Pantisawat

Answer 1

我遇到了相同的问题。查看vue-loader文档，发现需要编写css规则。

安装vue-style-loader和css-loader这两个包。

在你的webpack.config.js文件的rules部分添加以下代码:

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

- joe

---

我不明白为什么在Typescript、Vue或GitHub/vue-loader领域中没有任何文档记录这个。我花了太长时间寻找这个解决方案。 - monkeydeus

我也是。花了太多时间寻找这个答案。浏览了许多Git问题、其他StackOverflow问题，最终找到了这个可行的方法。 - Diego Lima