vue.js - How to use CSS in a vue project

Question

I'm working on a Vue.js + webpack project. I've tried several ways but my css won't work. This is my code

<style scoped> 
@import './styles/home.css';
</style>
<template>
<div class="hello">
  <div class="menu" >{{who}}
    <button @click="info()">Inforation</button>
  </div>
  <router-view/>
</div>
</template>

home.css

.menu{
width: 100%; 
height:60px;  
background-color:#E0E0E0; 
font-family:Helvetica; 
left:100px; 
top: 150px;
}
button {
background-color: #4CAF50; 
color: white; 
padding: 14px 20px; 
margin: 8px 0; 
border: none; 
cursor: pointer;
width: 100px; 
float:right;
}

compiling using npm run build, and run by app.js I have tried using .hello >>> .menu but don't work.

webpack-config

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

does this help https://stackoverflow.com/a/52671590/8172857 ? — Boussadjra Brahim, Nov 05 '20 at 15:24
stackoverflow.com/a/52671590/8172857 this does't work either — jamiecheng, Nov 05 '20 at 15:32
no, there are also vue-loader, babel-loader, and file-loader. I didn't paste it. — jamiecheng, Nov 05 '20 at 15:42
This thread might have the answer: https://stackoverflow.com/questions/43784202/how-to-include-css-files-in-vue-2 — Job Gathu, Nov 05 '20 at 15:46

score 0 · Answer 1 · answered Nov 05 '20 at 16:18

0

You are using <style scoped>. This would only work for local css, not for imported styles. Try using <style> with an external CSS file.

answered Nov 05 '20 at 16:18

Ferry Kranenburg

2,073
1
15
21

vue.js - How to use CSS in a vue project

1 Answers1