0

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"
  }
};
bluelemonade
  • 1,115
  • 1
  • 14
  • 26

1 Answers1

0

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.

Rakesh Kumar Cherukuri
  • 1,251
  • 9
  • 25
  • ok, you're right I switch to require ('./../node_modules/material-components-web/dist/material-components-web.js'); now it loads corretly, but the window.mdc.autoInit() didn't know mdc! how can I load the script correctly? I paste my webpack.config in the original post. – bluelemonade Dec 11 '17 at 09:40
  • Looking at the config, the bundled code is placed in `dist` folder. The devServer is serving from `build` is that expected ? The `index.html` is not processed by webpack. That would mean its your reposbility to include the scripts (i.e. the ones bundled by webpack : `bundle.js`. However, i would suggest you use `html-webpack-pugin`. Thaat would make your life easier as webpack will copy the index.html to `dist` and also insert the script tags too. Refer : https://webpack.js.org/plugins/html-webpack-plugin/ https://github.com/rakcheru/webpack-bootstrap/blob/master/webpack.config.js – Rakesh Kumar Cherukuri Dec 11 '17 at 11:44
  • As you can see, there are no script tags in https://github.com/rakcheru/webpack-bootstrap/blob/master/src/index.html . Thats because webpack does the work for you. – Rakesh Kumar Cherukuri Dec 11 '17 at 11:45