Module build failed when using postcss-loader for less
JesonAnne opened this issue · 4 comments
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.
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"
}
//
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
//
is invalid CSS commentsAlso you don't need
css-to-string-loader
, because css-loader supports https://github.com/webpack-contrib/css-loader#exporttype, just setstring
and don't usecss-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 } }
]
}
]
},
}
You can't use css-style-sheet
and style-loader,please remove style-loader
and set exportType: "string"
You can't use
css-style-sheet
and style-loader,please removestyle-loader
and setexportType: "string"
Thanks for you help, This is a great solution,