How to import .css file as a standalone module inside Vue3 with VScode

August 31, 2021

1. create a .css file under the folder where your .vue file was located

// hi.css
.space-between {
  //background-color: pink;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  //text-align: center;
}
.start {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  //text-align: center;
}
.marginBetweenLines {
  margin-block: 15px;
}
.bold {
  font-weight: bold;
  font-size: 110%;
}

2. search “Associations” in vscode settings

Then add:

key: *.css
value: scss

3. import it in .vue file

<style lang="scss" scoped>
@import './hi.css';
</style>