How to import css files into single file component?

I tried code like:

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

but it does not seem to work.

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(


<style lang='scss' scoped>
@import '~variables';

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? ?