导入时出现 Webpack 错误 css

Question

在我的 webpack 构建中包含 css 时，出现以下错误：

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module parse failed:     /Users/myuser/Projects/project/node_modules/bootstrap/dist/css/bootstrap.css Unexpected token (8:5)
You may need an appropriate loader to handle this file type.
|  */
| /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
| html {
|   font-family: sans-serif;
|   line-height: 1.15;
 @ ./assets/js/index.js 33:4-47
 @ multi webpack-dev-server/client?http://0.0.0.0:3000 webpack/hot/only-dev-server ./assets/js/index

我的 index.js 中的冒犯行是： import 'bootstrap/dist/css/bootstrap.css'

我的 webpack.config.js 看起来像这样：https://gist.github.com/colde/a0db7ca1a2d0a4596bc10241a6c55740

Answer 1

在您的 webpack 配置中，您定义 css 加载程序如下：

{
  test: /\.css$/,
  exclude: /(node_modules|bower_components)/,
  loader: "style-loader!css-loader"
}

因为 bootstrap 是您从 npm 或 bower 安装的模块，它位于 node_modules 或 bower_compoents 目录中。但是您将两者都排除在加载程序之外，因此 webpack 告诉您需要为其配置适当的加载程序。只需删除 exclude 选项即可使其正常工作：

{
  test: /\.css$/,
  loader: "style-loader!css-loader"
}

导入时出现 Webpack 错误 css

Webpack errors when importing css

javascript

webpack

webpack-dev-server