将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 的 tuts 模板对于 webpack 中的初学者来说很容易，它有你需要的每个加载器和配置。