webpack 2 在导入外部 css 时退出，代码为 3221226505（在 vue.js 组件中）

Question

我正在尝试在我的项目中使用 Google's Material Components for Web。问题是，当我添加 import statement 时，webpack 不会输出任何内容，但会以代码 3221226505 退出，根据 npm。

这是我的 App.vue 的片段：

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

可以在 here, and here 的 npm 日志中找到项目的提交树，以防它包含任何有趣的内容。

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

Answer 1

您用于导入 css 的语法是错误的，它应该像 documentation 中给出的 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">

以下是来自 documentation 的完整代码：

<!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>

Answer 2

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

但是，这是我更新的 webpack.config.js 的一部分。 module.exports.module.rules 现在包含这个：

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

webpack 2 在导入外部 css 时退出，代码为 3221226505（在 vue.js 组件中）

webpack 2 exits with code 3221226505 when importing external css (in vue.js component)

css

node.js

webpack

vue.js

material-components