How to import css files into single file component?

I tried code like:

<template>
  ...
</template>
<script>
...
</script>
<style scoped>
@import '../../node_modules/foo/bar.css';
</style>

but it does not seem to work.
Thanks.

Remove the first dot:

@import './../node_modules/foo/bar.css';
1 Like

What is the error? Is is possibly a problem with webpack rather that vue? How about trying an absolute path from the route of the project?

I like to do the following with webpack

    "variables": path.resolve(
            __dirname,
            "resources/assets/sass/_variables.scss"
      ),

Then

<style lang='scss' scoped>
@import '~variables';
</stye>
2 Likes

I imported css in a single component in Vuejs. For example into About;

@import '../assets/css/style.css'; I just want it to work in about. But the css also appears in Home.vue. When I refresh the page, it is deleted in css Home. The css affects the router transitions. How can I prevent this? ?