通过WebPack添加材料组件 - web.css

Question

我将metrial-components-web.css添加到我的index.html文件的标题中。

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

CSS组件效果很好。现在，我通过WebPack添加了一些Javscript组件。现在，我可以将所有vai webpack添加到我的bundle.js中。

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

没有错误，但没有加载样式！问题在哪里？

问候

我的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

很难在不查看webpack config的情况下固定确切原因。

尽管如此，CSS需要WebPack文档中建议的两个装载机。我只能猜测装载机没有到位。

一个人也可以使用内联导入，如下所述

虽然不接近您试图通过此简单代码随意扫描的内容。它基本上具有通过WebPack捆绑的Bootstrap CSS。但是请注意，但是，我使用了require()，而不是import。不应该在WebPack配置中添加适当的JS预编译器切换。