CSS - 您可能需要一个适当的加载器来处理此文件类型。

Question

我在我的App.jsx文件中像这样导入了一个css文件：import './App.css';

我在webpack.config.js中有以下代码。

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/build');
var APP_DIR = path.resolve(__dirname, 'src/app');

var config = {
  entry: APP_DIR + '/App.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    loaders : [
    {
      test: /\.scss$/,
      include : APP_DIR,
      loaders : ["style", "css", "sass"]
    },
    {
      test : /\.jsx?/,
      include : APP_DIR,
      loader : 'babel'
    }
   ]
  }
};

module.exports = config;

由于我已经为CSS加载器做了处理，所以一切似乎都很正常。

但是，我遇到了以下问题：

ERROR in ./src/app/App.css
Module parse failed: /path/to/file/App.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)

- bsky

---

你的测试是针对 scss 而不是 css，请使用 require('app.scss')，或者如果你想直接导入 css，请添加另一个 css 的测试。 - Keith

Answer 1

你只配置了scss loader，所以一旦它处理到一个css文件时，就不知道如何解析。

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

这个配置应该可以让你继续前进。

编辑：

另外，如果你正在使用scss，为什么不将App.css更改为App.scss呢？这样你的CSS类型就保持一致，而且也不需要包括CSS loader。我认为这是最佳解决方案。

- finalfreq

---

当你说“将App.css更改为App.scss”时，我认为你的意思是转换为SCSS？我不是要挑刺，但是当你说“更改”时，这对我来说似乎有点含糊不清，因为它可能只是重命名文件，这样就行不通了。如果我错了，请纠正我。 - Ian G

Answer 2

除了 finalfreq的回答，现在最新的做法不再是使用!来分隔加载器，而是将它们作为一个数组与use一起包含：

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

- Joundill