Giters

webpack-contrib / postcss-loader

PostCSS loader for webpack

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Module build failed when using postcss-loader for less

JesonAnne opened this issue · comments

commented

Bug report

I packaged with custom webpack via angular-cli and configured the relevant less compilation rules, but the rules did not take effect and generated an error, giving the error message 'module build failed form postcss-loader'.
I tried to fix it based on bug: #529, but it didn't work

Stackoveflow: https://stackoverflow.com/questions/71644804/how-to-fix-module-build-failed-from-postcss-loader

Actual Behavior

poastcss-loader reports error 'Module build failed' during webpack packaging.
image

Expected Behavior

The css-related compilation via webpack should pass properly

How Do We Reproduce?

package.json

{
  "name": "htmlaccess",
  "version": "1.0.0",
  "private": true,
  "description": "HTML Access View Client & Chrome Client",
  "scripts": {
    "preinstall": "npx npm-force-resolutions",
  },
  "resolutions": {
    "webpack-dev-server/**/spdy-transport": "^3.0.0",
    "postcss-import": "^13.0.0"
  },
  "dependencies": {
    "@angular/animations": "13.2.4",
    "@angular/common": "13.2.4",
    "@angular/compiler": "13.2.4",
    "@angular/core": "13.2.4",
    "@angular/forms": "13.2.4",
    "@angular/localize": "^13.2.4",
    "@angular/platform-browser": "13.2.4",
    "@angular/router": "13.2.4",
    "@auth0/angular-jwt": "^5.0.2",
    "@ng-bootstrap/ng-bootstrap": "^11.0.0",
    "@types/lodash": "^4.14.175",
    "big-integer": "^1.6.50",
    "bootstrap": "4.5.2",
    "buffer": "^6.0.3",
    "core-js": "2.6.9",
    "crc-32": "^1.2.0",
    "crypto-browserify": "^3.12.0",
    "file-saver": "^2.0.5",
    "jquery": "3.6.0",
    "jquery-ui-dist": "1.12.1",
    "jssha": "3.1.2",
    "lodash": "^4.17.21",
    "popper.js": "1.16.1",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.6.7",
    "snappyjs": "^0.6.0",
    "style-loader": "^3.3.1",
    "tslib": "^2.0.0",
    "webpack": "^5.67.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^13.1.0",
    "@angular-devkit/build-angular": "13.2.5",
    "@angular-devkit/core": "~13.2.5",
    "@angular/cli": "13.2.5",
    "@angular/compiler-cli": "~13.2.4",
    "@angular/language-service": "~13.2.4",
    "@angular/platform-browser-dynamic": "~13.2.4",
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@ngtools/webpack": "^13.2.5",
    "@types/angular": "^1.6.57",
    "@types/bootstrap": "^4.5.0",
    "@types/chrome-apps": "0.0.13",
    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "^3.6.5",
    "@types/jquery": "^3.5.1",
    "@types/jqueryui": "^1.12.10",
    "@types/node": "14.0.4",
    "@types/w3c-web-usb": "^1.0.4",
    "@typescript-eslint/eslint-plugin": "^5.14.0",
    "@typescript-eslint/parser": "^5.14.0",
    "babel-loader": "^8.2.2",
    "base-href-webpack-plugin": "^3.0.0",
    "bower": "1.8.8",
    "bower-art-resolver": "^2.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-dir": "^0.3.0",
    "copy-webpack-plugin": "^10.2.4",
    "cross-env": "^7.0.3",
    "css-loader": "^3.6.0",
    "css-to-string-loader": "^0.1.3",
    "dts-bundle": "^0.7.3",
    "eslint": "^8.10.0",
    "eslint-config-google": "^0.14.0",
    "eslint-webpack-plugin": "^3.1.1",
    "exports-loader": "^0.6.4",
    "expose-loader": "^3.0.0",
    "extend": "^3.0.2",
    "file-loader": "^5.0.2",
    "gettext-parser": "1.1.2",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^5.5.0",
    "http-rewrite-middleware": "0.1.6",
    "imports-loader": "^0.7.1",
    "jasmine-core": "^3.7.1",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.16",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.4",
    "karma-sabarivka-reporter": "^3.2.5",
    "less": "^4.1.0",
    "less-loader": "^6.2.0",
    "lint-staged": "^12.3.4",
    "mini-css-extract-plugin": "^2.5.3",
    "ng-mocks": "^11.10.1",
    "null-loader": "^0.1.1",
    "prettier": "^1.16.4",
    "raw-loader": "0.5.1",
    "script-loader": "^0.7.0",
    "shelljs": "^0.8.5",
    "string-replace-loader": "^3.0.0",
    "type-check": "^0.4.0",
    "typedoc": "^0.22.12",
    "typescript": "^4.3.5",
    "url-loader": "^3.0.0",
    "webpack-cli": "^4.9.2",
    "webpack-crx": "^1.0.7",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^4.7.4"
  }
}

webpack.config.js

module.exports = {
module: {
        rules: [
            {
               test: /\.less$/,
               use: [
                  "css-to-string-loader",
                  { loader: "css-loader", options: { sourceMap: true } },
                  { loader: "less-loader", options: { sourceMap: true } }
               ]
            }
        ]
    },
}

angular.json

{
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "cli": {
      "analytics": false
   },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
      "html5": {
         "projectType": "application",
         "schematics": {
            "@schematics/angular:component": {
               "style": "css"
            }
         },
         "root": "projects/html5",
         "sourceRoot": "src/main/webapp/webclient",
         "prefix": "vmw",
         "architect": {
            "build": {
               "builder":"@angular-builders/custom-webpack:browser",
               "options": {
                  "customWebpackConfig": {
                     "path": "html5-access.webpack-config.js",
                     "replaceDuplicatePlugins": true
                  },
                  "outputPath": "target/web-build/webclient",
                  "index": "src/main/webapp/webclient/chrome-client/index.html",
                  "main": "src/main/webapp/webclient/chrome-client/resources/main.js",
                  "polyfills": "src/main/webapp/webclient/polyfills.ts",
                  "tsConfig": "tsconfig.app.json"
               },
               "configurations": {
                  "production": {
                     "fileReplacements": [
                        {
                           "replace": "src/main/webapp/webclient/titan/environments/environment.ts",
                           "with": "src/main/webapp/webclient/titan/environments/environment.prod.ts"
                        }
                     ],
                     "optimization": true,
                     "outputHashing": "none",
                     "sourceMap": false,
                     "namedChunks": false,
                     "extractLicenses": true,
                     "vendorChunk": false,
                     "buildOptimizer": true,
                     "budgets": [
                        {
                           "type": "initial",
                           "maximumWarning": "100mb",
                           "maximumError": "100mb"
                        },
                        {
                           "type": "anyComponentStyle",
                           "maximumWarning": "2kb",
                           "maximumError": "4kb"
                        }
                     ]
                  }
               }
            }
         }
      }
   },
   "defaultProject": "html5"
}
commented

// is invalid CSS comments

Also you don't need css-to-string-loader, because css-loader supports https://github.com/webpack-contrib/css-loader#exporttype, just set string and don't use css-to-string-loader

commented

// is invalid CSS comments

Also you don't need css-to-string-loader, because css-loader supports https://github.com/webpack-contrib/css-loader#exporttype, just set string and don't use css-to-string-loader

I removed css-to-string-loader and reconfigured rules, but still have the same reported error.

module.exports = {
module: {
        rules: [
            {
               test: /\.less$/,
               use: [
                  "style-loader",
                  { loader: "css-loader", options: { exportType: "css-style-sheet"  } },
                  { loader: "less-loader", options: { sourceMap: true } }
               ]
            }
        ]
    },
}
commented

You can't use css-style-sheet and style-loader,please remove style-loader and set exportType: "string"

commented

You can't use css-style-sheet and style-loader,please remove style-loader and set exportType: "string"

Thanks for you help, This is a great solution,