webpack経由でmaterial-components-web.cssを追加します。

Question

私のindex.htmlファイルのヘッダにmterial-components-web.cssを追加しました。

<script src="node_modules/material-components-web/dist/material-components-web.js"></script> 
<script src="dist/bundle.js"></script> 

cssコンポーネントがうまく機能します。今度はwebpack経由でいくつかのjavscriptコンポーネントを追加しました。今、あなたは私のbundle.jsにすべてのwebpackを追加することができますthouhgt。

import 'material-components-web/dist/material-components-web.js'; 

エラーはありませんが、スタイルはロードされません！うん、問題？

について

my webpackの設定です。

const path = require('path'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: './src/app.js', 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader', 'sass-loader'] 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('style.css') 
    ], 
    devServer: { 
    contentBase: "./build" 
    } 
}; 

Answer 1

ウェブパックの設定を見なくても、正確な原因を特定するのは難しいです。

しかし、CSSには、webpack docsで提案されているように2つのローダーが必要です。私はローダーが適所にないと推測することができます。あなたが持っているthis簡単なコードをスキャンして自由に感じるしようとしているものにhere

ないに近いもののを説明するように

一つは、あまりにもインラインインポートを使用することができます。それは基本的にwebpack経由でバンドルされたブートストラップCSSを持っています。しかし、私はrequire()を使用していて、importを使用していないことに注意してください。 webpack configに追加された適切なjsプリコンパイラで切り替えるのは難しいはずです。