Including my own js and css file in a vue cli3 project - javascript

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 ?


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';


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';


Try this in main.js
import "path-your-css/your-css.css";

Related

Why Would You Import CSS Files in a JS File?

I'm really confused by this file index.js:
import Cookies from 'js-cookie';
import createHash from 'sha.js';
import Evaporate from 'evaporate';
import SparkMD5 from 'spark-md5';
import './css/bootstrap-progress.css';
import './css/styles.css';
...
Why would you import a .css file in a .js file? I've never seen this before. Is this common? What does it allow you to do?

The repository appears to be using Parcel. See
Parcel's docs on CSS:
Parcel includes support for CSS out of the box. To add a CSS file, either ... ... or import it from a JavaScript file:
import './index.css';
What it will do is, if that JavaScript module is included, when the module is imported, it will insert the CSS (from that ./css/styles.css path in the source code) onto the page. It's not a native JavaScript functionality of ES6 modules - it's something that a bundler (like Parcel, or Webpack, etc) manages. When bundling, the CSS text will be turned into a JavaScript string somewhere in the resulting bundle, and then put onto the page with something like
const style = document.createElement('style');
document.body.appendChild(style);
style.textContent = `<CONTENT OF IMPORTED CSS>`;

Build package with CSS modules for Next.js

Building a package with UI components using CSS modules. Each component is totally separated from others and includes CSS styles like this:
import css from './styles.css'
const Component = () => {
return (
<div className={css.container}>Hello there!</div>
)
}
export { SearchBar }
In another package based on Next.js I want import a component like this:
import { Component } from '#me/components'
But Next.js doesn't allow Module CSS import from node_modules.
My question is how can I build the component package with CSS transformed into JS. It shouldn't be merged into one file just like Webpack do. Instead it should build each component separately. Also I don't want to import a huge CSS files with all styles merged into single file. Easiest way would be to use CSS-in-JS, but I want to use PostCSS written in CSS files.

Why would you import .scss into .js?

I am trying to understand some JavaScript source code and at the top of the .js file I am seeing this:
import './style.scss';
I'm already confused. Sass is supposed to be converted to CSS. JavaScript and CSS are typically completely separate. Why would you import Sass into JavaScript?

You might want to look into JSX and React:
https://reactjs.org/docs/introducing-jsx.html
JSX is an extension of Javascript that allows you to add HTML code.
You wouldn't import Sass into a javascript file, you would import it in a JSX file and use it to link an element to a particular className.

How to import a function from a .js file when using Typescript and Vue

I have a Vue.js project that is using Typescript and it is working well but I have an old piece of javascript with a lot of logic in it that I need to use and I would like to import it but I seem to have tried every combination of Import syntax to the .vue file and am unable to load the javascript.
I've tried
import * as revpubeditor from '../modules/revpubeditor'
import revpubeditor from '../modules/revpubeditor'
import { revpubeditor } from '../modules/revpubeditor'
and have also altered the .js file and added a .d.ts file so that it will compile and not give any errors but at runtime in the browser the revpubeditor that I have imported is not found by webpack.
How should this be setup and consumed? I am not worried about it being strongly typed I just want the webpack loader to find the module.

Reactjs - Importing CSS/JS in component

I am trying to create a webpage using a HTML theme on Reactjs. I have studied and found there are 4 ways to import CSS at this link. All these ways outputs the same way i.e <style>MY_CSS</style> just before closing HEAD tag.
This is OK for single CSS but when we are using multiple CSS it may conflict with other one.
So my question is can we import CSS so that it will show in not as <style></style>. As <style> tags works as inline CSS and I don't want to use it inline.
2nd question: How can I import Js?
As I am using requirejs to load multiple js, for this I am trying to import require.config.js where my other js are called.
Please have a look what I am getting
Need to have like this below
Please help, thanks in advance!

This is just done via ordinary ES. For example:
import React, { Component } from 'react'
import './SomeFileWithStyle.css'
The second line imports a CSS file containing, well, CSS code. You are now able to use the classes specified in there. Follow this guide if you need further help: Styling and CSS - React.
Read more about the ES import statement here: import - JavaScript | MDN

The easiest way to learn React and the way you should structure a React project ( this includes everything, from css, to multiple js files, etc ) is to use create-react-app
Let me try to elaborate a bit.
React is a javascript library. You could, for example, get the library from a cdn and include it in your index.html file much in the same way you would get jquery for example. And, with the library included, you could do things like this:
const element = React.createElement(
'h1',
null,
'Hello, world!'
);
const container = document.getElementById('root');
ReactDOM.render(element, container);
Since you have the library from a cdn, you have access to it's methods, for example createElement and the library will look for a node in the dom with id called root and insert there a h1 node containing Hello, world!. You could then apply to the newly created node a style of your choice.
This example was taken from here
While it is certainly possible to use React this way, you shouldn't, in my opinion.
What you should do is follow the steps outlined in the create-react-app link and bootstrap a project using create-react-app. This will give you a pre configured project, that will allow you to use the library in a modern way.
The project that create-react-app offers you is set up to use a tool called webpack and a tool called babel. Webpack is a module bundler. Using a set of rules, it will take several files and bundle them together. How and why it works is beyond the scope of this question. Babel is a javascript compiler or syntax transformer. Also using a set of rules, it turns ES6 into regular javascript. Again, the how and the way are out of scope. What you should know is, because of webpack and babel, you will be able to write code like this.
import styles from 'style.module.css'
This is done with no effort on your part, because everything is already configured by create-react-app.
This is why I recommend you start with this. Just install it, bootstrap a project and take a quick look at how App.js is set up. You will see there css imports, component imports and will give you a good if shallow overview of how a modern React project works.

Import your .css file from the correct path. I struggled with using <link rel="stylesheet" href="css/style.css">
in index.html without any luck.
But instead:
index.html:
<link rel="stylesheet" href="/src/css/style.css"/>
style.css:
div.custom-div {
background-color: red;
}
Now, you can use
<div className="custom-div">

You need to use css-loader when creating bundle with wepback.
Install it:
npm install css-loader --save-dev
Read more here

Categories

Resources