将js，css，scss文件导入到webpack的正确方法是什么？

Question

我是webpack的新手，我正在尝试在我的项目中使用material-dashboard（ https://www.creative-tim.com/product/material-dashboard ）。

实际上，我是使用npm install（ 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，所以我尝试使用输入文件（app.ts）中的require进行导入

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

注意 ：如果您仍然发现问题，可以将Vue webpack template与vue cli一起使用，则utube上有很多提示，该模板对于webpack的初学者来说很容易，它具有所需的每个加载程序和配置。