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文件，它就不知道如何解析。

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

应该让你起床。

编辑：

此外，如果您正在使用scss，为什么不将App.css更改为App.scss，这样您的css类型是一致的，并且不必包含css加载器。我会说这是最好的解决方案。

CSS - 您可能需要适当的加载程序来处理此文件类型

1 个答案: