javascript - 将 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文件使用

   导入 'the_name_of_npm_package';

2. 用于'css'文件使用

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

注意:如果你仍然发现问题，你可以使用 Vue webpack 模板 和 vue cli您需要的每个加载程序和配置。