当我将 mapbax-gl.css 与 react/typescript 一起使用时出现错误

Question

当我使用 react/typescript 使用 mapbox-gl 构建地图时，我收到了一个错误，我为 mapbox-gl 导入 css 文件“import 'mapbox-gl/dist/mapbox-gl.css';”

我不知道我还需要什么样的加载器，因为“webpack.config.js”中我已经导入了 css-loader....

错误

ERROR in ./node_modules/mapbox-gl/dist/mapbox-gl.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const dotenv = require('dotenv');

module.exports = () => {
  const env = dotenv.config().parsed;

  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    mode: 'development',
    entry: path.resolve(__dirname, './src/index.tsx'),
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            'postcss-loader',
            'sass-loader'
          ]
        },
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html'
      }),
      new webpack.DefinePlugin(envKeys)
    ],
    resolve: {
      extensions: ['.tsx', '.ts', '.js', '.json']
    },
    devtool: 'inline-source-map',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
      contentBase: path.resolve(__dirname, 'dist'),
      historyApiFallback: true,
      inline: true,
      hot: true,
      port: 5000,
      open: true
    },
  }
};
```

Answer 1

您没有匹配正确扩展名上的css-loader。

通过添加新规则，将其用于 .css 文件：

  rules: [
    {
      test: /\.css$/,
      use: [
        'css-loader',
      ]
    },
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'postcss-loader',
        'sass-loader'
      ]
    },