使用带有react / typescript的mapbax-gl.css时出现错误

当我使用react / typescript用mapbox-gl构建地图时,出现错误,我为mapbox-gl导入了css文件“ import'mapbox-gl / dist / mapbox-gl.css';”

我无法弄清楚在已经导入的css-loader中的“ webpack.config.js”中我仍然需要哪种加载器...。

错误

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,historyApiFallback: true,inline: true,hot: true,port: 5000,open: true
    },}
};
```

iCMS 回答:使用带有react / typescript的mapbax-gl.css时出现错误

您没有在正确的扩展名上匹配document.getElementById('...').value

通过添加新规则,将其用于const el = document.getElementById('externalLink'); // Create a content for a new page with a script in it const newPageContent = ` <DOCTYPE html> <head> <title>some code</title> </head> <body contenteditable> <h1>Some editable text</h1> </body> `; // Listen on "click" event el.addEventListener('click',(e) => { e.preventDefault(); const codeValue = document.getElementById("codeBox").value; console.log('Code Value',codeValue); // Create a new window on click const w = window.open('','_blank'); // Write your content to it w.document.write(newPageContent); });文件:

<!-- Your link !-->
<a id="externalLink" href="#/">Click to run the code</a>
<br>
<input type="text" name="Codebox" id="codeBox" value="Code here...">
本文链接:https://www.f2er.com/1989954.html

大家都在问