CSS - 你可能需要一个合适的加载器来处理这个文件类型

Posted 2023-02-22

【中文标题】CSS - 你可能需要一个合适的加载器来处理这个文件类型

【英文标题】：CSS - You may need an appropriate loader to handle this file type

【发布时间】：2017-03-22 09:30:15

【问题描述】：

在我的 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)

【问题讨论】：

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

【参考方案1】：

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

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

应该让你振作起来。

编辑：

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

【讨论】：

当您说“将 App.css 更改为 App.scss”时，我假设您的意思是转换为 SCSS？不是想成为一个坚持不懈的人，但是当您说“更改”时，这对我来说似乎有点含糊，因为这可能意味着仅重命名文件，在这种情况下它将不起作用。如果我错了，请纠正我。