javascript - 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)

Answer 1

你只有一个 scss 加载器设置，所以一旦它遇到一个 css 文件，它就不知道如何解析。

{ 测试:/\.css$/，加载器:“style-loader!css-loader”}

应该让你起床并继续前进。

编辑:

此外，如果您使用的是 scss，为什么不直接将 App.css 更改为 App.scss，这样您的 css 类型就可以保持一致并且不必包含 css 加载程序。我会说这是最好的解决方案。