vue-cli + webpack: where to include npm package js and css files?

Question

I'm trying to import an npm package into my vue-cli dev site. Here are the instructions provided by the package website:

It says that it needs the css and js files to be included somewhere in the code. How would I go about doing this?

I'm guessing the css file is included by putting this in App.vue:

<style>
  @import '../node_modules/swiper/dist/css/swiper.min.css';
....
</style>

Is that right? How would I include the .js file? Inside App.vue, or main.js? I'm honestly not sure how the syntax for that would go either.

Here is my index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="build/swiper.min.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="build/swiper.min.js"></script>
  </body>
</html>

masongzhi · Accepted Answer · 2017-07-08 02:44:15Z

0

you can include these files in build/index.htmllike common js and css

<head> 
....
 <link rel="stylesheet" href="path_to_css/idangerous.swiper.css">
 <script defer src="path_to_js/idangerous.swiper-2.x.min.js"></script> 
.... 
</head>

answered Jul 8, 2017 at 2:44

masongzhi

1641 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rpivovar Over a year ago

This throws a 404 error in development mode, unfortunately.

masongzhi Over a year ago

you can take these two files into build foler,

masongzhi Over a year ago

sorry I see the code after you remind me, it is my fault; you should use relative path, <link rel="stylesheet" href="./swiper.min.css"><script src="./swiper.min.js"></script>

rpivovar · Accepted Answer · 2017-07-08 15:41:47Z

0

This seems to be working - in my main.js file, I've included the js and css files like this:

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

As far as I can tell, this is correctly importing the npm package into the project for use in development and production.

answered Jul 8, 2017 at 15:41

rpivovar

3,48813 gold badges50 silver badges85 bronze badges

Collectives™ on Stack Overflow

vue-cli + webpack: where to include npm package js and css files?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related