Registry /
http-networking / liferay-npm-bundler-loader-css-loader
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
"css-loader"
✓ {
"rules": [
{
"test": "\\.css$",
"use": ["css-loader"]
}
]
}
✗ import { cssLoader } from 'liferay-npm-bundler-loader-css-loader';
// or
const cssLoader = require('liferay-npm-bundler-loader-css-loader');
This loader is configured declaratively in the `liferay-npm-bundler`'s `.npmbundlerrc` file by referencing its string name, 'css-loader'. It does not expose JavaScript module exports for direct import into application code.
liferay-npm-bundler-loader-css-loader
✓ /* No direct ES module import syntax for this package. */
✗ import * as CssLoader from 'liferay-npm-bundler-loader-css-loader';
Direct ES module imports of the `liferay-npm-bundler-loader-css-loader` package are not applicable. It functions as a build-time loader, not a runtime library with code exports.
liferay-npm-bundler-loader-css-loader (CommonJS)
✓ /* No direct CommonJS require syntax for this package. */
✗ const cssLoader = require('liferay-npm-bundler-loader-css-loader');
This package is a build-time loader and does not expose a CommonJS API for programmatic `require()` usage. Its functionality is activated exclusively through `.npmbundlerrc` configuration.
This quickstart demonstrates how to configure the `liferay-npm-bundler-loader-css-loader` in your `.npmbundlerrc` file and how to trigger CSS injection by `require`ing a CSS file within your JavaScript module, all within a Liferay Portal OSGi module context.
// .npmbundlerrc
// This file configures the Liferay npm bundler to use the css-loader.
// Place this file at the root of your Liferay OSGi module project.
{
"rules": [
{
"test": "\\.css$", // Apply this rule to all files ending with .css
"use": ["css-loader"] // Use liferay-npm-bundler-loader-css-loader
}
],
"create-jar": {
"features": {
"web-context": "/my-custom-portlet-css-module" // Define the web context path for the OSGi bundle
}
}
}
// src/main/resources/META-INF/resources/styles/main.css
// Example CSS file within your Liferay OSGi module
.my-custom-class {
background-color: #f0f8ff;
color: #333;
padding: 15px;
border-radius: 5px;
font-family: Arial, sans-serif;
text-align: center;
}
/* Another style for demonstration */
body {
margin: 0;
background-color: #eee;
}
// src/main/resources/META-INF/resources/index.js
// Example JavaScript file. Requiring the CSS file will trigger the loader
// and inject a <link> tag into the HTML when this module runs in the browser.
// This is typically done in your main entry point for the Liferay portlet or module.
console.log("Attempting to load CSS via Liferay npm bundler loader...");
require('./styles/main.css'); // This line is crucial for the loader to process and inject the CSS.
// Further application logic for your Liferay module would go here.
// For instance, rendering a component that uses the .my-custom-class.
document.addEventListener('DOMContentLoaded', () => {
const rootDiv = document.createElement('div');
rootDiv.className = 'my-custom-class';
rootDiv.textContent = 'Hello from Liferay CSS Module!';
document.body.appendChild(rootDiv);
console.log("DOM content loaded and custom element appended.");
});
// Note: This setup assumes a Liferay environment and proper build/deployment through Liferay's tooling.
Errors
Common errors & fixes
CSS file not loaded or 404 error for CSS link in the browser's network tab.
The `web-context` path for the OSGi bundle is incorrectly configured in `.npmbundlerrc` or `bnd.bnd`, or the OSGi bundle containing the CSS is not properly deployed or accessible within the Liferay Portal.
fixVerify that the `create-jar.features.web-context` property in your `.npmbundlerrc` file or the `Web-ContextPath` in your `bnd.bnd` file accurately matches the deployed context path in Liferay. Ensure the OSGi bundle is correctly deployed and active.
Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type.
This error typically occurs if you're using a standard bundler like Webpack alongside Liferay's npm bundler and have not configured Webpack to handle CSS files, or if you're attempting to import CSS in a context where the Liferay bundler's loader is not active.
fixIf using Webpack, ensure you have `css-loader` and `style-loader` (or `MiniCssExtractPlugin.loader`) configured in your Webpack rules for `.css` files. If relying solely on the Liferay bundler, confirm that your `.npmbundlerrc` configuration for `css-loader` is correct and that the module containing the `require('./my.css')` statement is being processed by the Liferay bundler. Audit
Dependencies
liferay-npm-bundlerrequiredThis package is a loader that operates within the liferay-npm-bundler ecosystem and requires it to function. It is a development dependency.