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 config中添加的正确的js预编译器来切换是不容易的。

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

1 个答案: