1

我正在尝试在我的项目中使用Google 的 Material Components for Web 。根据 npm的说法，问题是当我添加import 语句时，webpack 不输出任何内容，而是以 code 退出。3221226505

这是我的 App.vue 的片段：

import 'material-components-web/dist/material-components-web.min.css';

项目的提交树可以在这里找到，这里是 npm 日志，以防它包含任何有趣的内容。

我希望有人可以帮助我解决这个问题。如果您在我的回购中发现任何其他非常规的内容，请告诉我。谢谢！

4

2 回答 2

0

您用于导入 css 的语法是错误的，它应该类似于文档中给出的 index.html 中的以下内容：

 <link rel="stylesheet"
          href="node_modules/material-components-web/dist/material-components-web.css">

但是node_modules当你使用 webpack 时将无法访问，你可以将这个文件移动到你的静态文件夹并像下面这样导入它：

<link rel="stylesheet" href="/static/material-components-web.css" type="text/css">

以下是文档中的完整代码：

<!DOCTYPE html>
<html class="mdc-typography">
  <head>
    <title>Material Components for the web</title>
    <link rel="stylesheet" href="/static/material-components-web.css" type="text/css">
  </head>
  <body>
    //HTML where you use material components
    <script src="/static/material-components-web.js"></script>
    <script>mdc.autoInit()</script>
  </body>
</html>
于 2016-12-23T13:15:35.670 回答
0

原来我只是忘了为css文件定义一个加载器。即使我仍然想知道为什么 webpack 只是以一些错误代码退出......

但是，这是我更新的webpack.config.js. module.exports.module.rules现在包含以下内容：

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}
于 2016-12-23T13:21:32.953 回答