What is the proper way to import js, css, scss files to webpack?

Question

I'm new to webpack and I am trying to use material-dashboard ( https://www.creative-tim.com/product/material-dashboard ) in my project.

Actually, I installed using npm install ( https://www.npmjs.com/package/material-dashboard )

So I got this structure in my ./node_modules/material-dashboard:

material-dashboard/
├── assets/
|   ├── css/
|   |   ├── bootstrap.min.css
|   |   ├── material-dashboard.css
|   |   └── demo.css
|   ├── js/
|   |   ├── bootstrap-notify.js
|   |   ├── bootstrap.min.js
|   |   ├── chartist.min.js
|   |   ├── demo.js
|   |   ├── jquery-3.1.0.min.js
|   |   ├── material-dashboard.js
|   |   └── material.min.js
|   ├── sass/
|   |    ├── md
|   |    └── material-dashboard.scss
|   └── img/
|
├── documentation/
├── examples/

In their example to import they just use link tags like:

<!-- CSS Files --> <link href="../assets/css/bootstrap.min.css" rel="stylesheet" /> <link href="../assets/css/material-dashboard.css" rel="stylesheet"/> <link href="css/demo-documentation.css" rel="stylesheet" />

But I'm using webpack so I've tried to import using require in my entry file (app.ts)

require('material-dashboard/assets/css/material-dashboard.css'); 

after adding in my webpack.config

loader: isTest ? 'null' : "style-loader!css-loader"

Apparently it works, I'm not quite sure. But there are 3 css files, 7 js files and 2 .scss files. I don't want to to import file by file, of course there is a better way.

I would like to know what is the proper way to import in webpack js/css/scss files to use in a project?

Thanks.

Answer 1

very easy man

1. for js file use

   import 'the_name_of_npm_package';

2. for 'css' file use

   require('the_name_of_npm_package/../../../the_file.css') ;

NOTE : if you still find problems u can use Vue webpack template with vue cli there are alot of tuts on utube that template is easy for begginers in webpack it has every loader and config you need .