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>

Answer 1

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

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

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

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

Webpack 你可能需要一个合适的加载器来处理这种文件类型，用 sue

Webpack You may need an appropriate loader to handle this file type, with sue

webpack

vue.js

css-loader

vue-loader