將js，css，scss文件導入到webpack的正確方法是什麼？

Question

我是新來的webpack，我試圖在我的項目中使用材料儀表板（https://www.creative-tim.com/product/material-dashboard）。

其實，我使用NPM安裝安裝（https://www.npmjs.com/package/material-dashboard）

所以我得到了這個結構，我./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/ 

在他們的例子來導入他們只是使用鏈接標籤像：

<!-- 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" />

但我使用的WebPack所以我嘗試使用需要我的耳鼻喉進口RY文件（app.ts）

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

在我webpack.config

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

加入後顯然它的工作原理，我不太清楚。但有3個css文件，7個js文件和2個.scss文件。 我不想通過文件導入文件，當然還有更好的辦法。

我想知道什麼是適當的方式來導入webpack js/css/scss文件在項目中使用？

謝謝。

Answer 1

很容易的人

1. 爲js文件使用

   import 'the_name_of_npm_package';

2. 爲 'CSS' 的文件使用

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

注意：如果你仍然發現問題u可以使用Vue webpack template與VUE CLI有很多關於UTUBE TUTS的該模板很容易在的WebPack begginers它有所有裝載和配置需要。