通过 webpack 添加 material-components-web.css

Question

我将 mterial-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 配置，很难确定确切原因。

尽管如此，CSS 需要两个加载器，正如 webpack docs 中所建议的那样。我只能猜测装载机没有到位。

也可以按照here的说明使用内联导入

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