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

Posted 2023-02-22

【中文标题】Webpack 你可能需要一个合适的加载器来处理这个文件类型，sue

【英文标题】：Webpack You may need an appropriate loader to handle this file type, with sue

【发布时间】：2018-11-22 03:34:49

【问题描述】：

我使用 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>

【问题讨论】：

使用哪个版本的vue-loader？

@raina77ow 我的 cue-loader 是 15.2.4 版

【参考方案1】：

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

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

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

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

【讨论】：

我不明白为什么 Typescript、Vue 或 GitHub/vue-loader 域中的某处没有记录。花了很长时间寻找这个解决方案。

这里也一样。花了太多时间寻找这个。浏览了许多 git 问题和其他 *** 问题，这就是最终奏效的方法。