最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

testing - Angular app wont build or run tests due to loader not being able to handle Leaflet css file - Stack Overflow

programmeradmin3浏览0评论

When trying to build or run tests in my Angular v18 application using Leaflet, I get the following error, serving works:

./node_modules/leaflet/dist/leaflet.css:3:0 - Error: Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See 
| /* required styles */
|
> .leaflet-pane,
| .leaflet-tile,
| .leaflet-marker-icon,

I tried installing css loader and style loader, and tried adjusting webpack.config.js + added the css files to angular.json

angular.json:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/fieldsightsolutions-frontend",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              },
              {
                "glob": "**/*",
                "input": "./node_modules/leaflet/dist/images"
              },
              {
                "glob": "**/*",
                "input": "./node_modules/leaflet-draw/dist/images"
              }
            ],
            "styles": [
              "src/styles.css",
              "node_modules/leaflet/dist/leaflet.css",
              "node_modules/leaflet-search/dist/leaflet-search.min.css",
              "node_modules/leaflet-control-geocoder/dist/Control.Geocoder.css",
              "node_modules/leaflet-geosearch/dist/geosearch.css",
              "node_modules/leaflet-draw/dist/leaflet.draw.css",
              "src/app/pages/map/mapponent.css"
            ],

webpack.config.js:

module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader', 
          'css-loader',  
          'postcss-loader',
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, 
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
发布评论

评论列表(0)

  1. 暂无评论