Question

我是webpack的新手，我正在尝试在我的项目中使用素材仪表板（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/

在他们要导入的示例中，他们只使用链接标记，如：

 <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

非常容易的人

用于js文件使用

import 'the_name_of_npm_package';
对于＆＃c;＆＃39;文件使用

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

注意：如果你仍然发现问题你可以使用Vue webpack template和vue cli在utube上有很多关键字，那么模板很容易在webpack中的begginers它有每个加载器并配置你需要。

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

1 个答案: