0

我将 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"
  }
};
4

1 回答 1

0

如果不查看 webpack 配置，很难确定确切原因。

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

如here所述，也可以使用内联导入

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

于 2017-12-08T19:29:58.307 回答