add material-components-web.css via webpack

Question

I added the mterial-components-web.css to the header of my index.html file.

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

the css components work great. Now I added a few javscript components via webpack. Now I thouhgt I could add all vai webpack into my bundle.js.

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

no error, but no styles loaded! wheres the problem?

regards

my webpack config.

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

Its difficult to pin down the exact cause without looking at webpack config.

Nevertheless, CSS needs two loaders as suggested in webpack docs. I can only guess that the loaders are not in place.

One can use inline import too as explained here

Though not near to what you are trying feel free to scan through this simple code that have. It basically has bootstrap css bundled via webpack. Note, however though, i have used require() and not import. Shouldnt be difficult to switch with proper js precompiler added in webpack config.