js、css、scssファイルをwebpackにインポートする適切な方法は何ですか？

Question

私はwebpackには新しく、私のプロジェクトではマテリアルダッシュボード（https://www.creative-tim.com/product/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/ 

彼らの例では：

実は、私はインストールNPM使用してインストール（https://www.npmjs.com/package/material-dashboard）

だから、私は./node_modules/material-dashboardでこの構造体を得ました以下のような：

<!-- 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の使用しているので、私は私の耳鼻咽喉科に必要使用してインポートしようとしました私webpack.configに

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

を追加した後RYファイル（app.ts）

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

どうやらそれは私はかなりよく分からない、動作します。しかし、3つのCSSファイル、7つのjsファイル、2つの.scssファイルがあります。 私はファイルでファイルをインポートしたくないのですが、もちろん良い方法があります。

プロジェクトで使用するwebpack js/css/scssファイルをインポートする適切な方法は何ですか？

ありがとうございました。 'CSS' ファイルのための

Answer 1

非常に簡単な男

1. jsファイル用の

   import 'the_name_of_npm_package';

2. require('the_name_of_npm_package/../../../the_file.css')を使用します。

注：あなたはまだ問題を発見した場合uはテンプレートが、それはすべてのローダーを持っているのWebPACKで初心者のために簡単であることをutube上tutsがたくさんありますVUE CLIでVue webpack templateを使用して、必要な設定できるの。