在vue cli3项目中包含我自己的js和css文件

Question

I have a couple of js and css files which were custom built and i want to include that into my vue cli3 project. Is there any way to import those files into my project ?

Answer 1

For custom js files, write all your logic in a object and export it at the end of the file :

const customJs = {
   /* custom javascript here */
}

export default customJs;

and then import it where you need it as :

import * as customJs from '../path/to/file.js'

For custom css files, you can use @import between the style tags like this:

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

Answer 2

You can use a pre-processor when creating the project with vue-cli.

See: Working with CSS

Or if you don't need a pre-processor and you are using CSS modules you can go for this route

See: CSS Modules

As for JavaScript it's pretty straight forward if you are on ES2016/ES6 just use the syntax

import tool from 'toolmodulename';

Answer 3

Try this in main.js

import "path-your-css/your-css.css";