当我使用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
},}
};
```