如何在vue-cli项目中使用css-loader

Question

我尝试使用vue-cli和css-loader在视图（App.vue）中导入css文件。

需要哪种配置才能正确加载css文件？

// App.vue

<template>
<div id="app">
<div id="nav">
      <router-link v-if="!isLoggedIn" to="/login">Login</router-link>    
      <span v-if="isLoggedIn"> | <a @click="logout">Logout</a></span>
</div>
<router-view/>
</div>
</template>
<script>
import './assets/styles/app.css'
</script>

// Vue.config.js

configureWebpack: {
 module: {
   rules: [
    {
      test: /\.css$/i,
      use: ['css-loader'],
    }
   ],
 },
},

//错误

 error  in ./src/App.vue?vue&type=style&index=0&lang=css&

 Syntax Error: SyntaxError

 (1:1) Unknown word

 > 1 | // Imports
     | ^
   2 | var ___CSS_LOADER_API_IMPORT___ = require("../node_modules/css- loader/dist/runtime/api.js");
   3 | exports = ___CSS_LOADER_API_IMPORT___(false);



   @ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css- 
  loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue- 
  loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1- 
  2!./node_modules/css-loader/dist/cjs.js!./node_modules/cache-loader/dist/cjs.js??ref--0- 
  0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css& 4:14-396 14:3-18:5 15:22-404
@ ./src/App.vue?vue&type=style&index=0&lang=css&
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.0.73:8080/sockjs-node (webpack)/hot/dev-s 
server.js ./src/main.js

谢谢您的帮助，Loïc

Answer 1

如果您要添加预处理器，请转到https://vue-loader.vuejs.org/guide/pre-processors.html#sass和https://cli.vuejs.org/guide/css.html#referencing-assets

在终端中查看ui并轻松安装依赖项。首先，如果需要举例说明，这很让人头疼，所以我将提供一个