Registry / web-framework / liferay-npm-bundler-loader-style-loader

liferay-npm-bundler-loader-style-loader

library2.32.2jsnpmunverified

The `liferay-npm-bundler-loader-style-loader` package, currently at version 2.32.2, serves as a specialized loader within the Liferay DXP frontend development ecosystem. Its core function is to transform standard CSS files into JavaScript modules. When these modules are subsequently required by the Liferay npm bundler, the encapsulated CSS is dynamically injected into the HTML document, enabling styles to be managed and loaded as part of the JavaScript build process. This package is part of the larger Liferay frontend projects monorepo, which suggests a regular, active release cadence across its various components, though specific releases for this loader might align with broader toolkit updates rather than independent cycles. Unlike generic `style-loader` implementations for bundlers like Webpack, this loader is explicitly designed to integrate with the `liferay-npm-bundler` build system, making it a critical tool for Liferay-specific module development and ensuring compatibility with the Liferay portal's unique module loading and theming architecture.

web-framework

npm install liferay-npm-bundler-loader-style-loader

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · LIFERAY-NPM-BUNDLE

liferay-npm-bundler-loader-style-loader

web-frameworkjavascriptv2.32.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

style-loader

✓ "style-loader"

Primary usage: string reference in Liferay `.npmbundlerrc` configuration files to specify the loader for CSS assets. Not a direct JavaScript import.

loaderFunction

✓ const loaderFunction = require('liferay-npm-bundler-loader-style-loader');

For programmatic use in a CommonJS environment, if one needed to access the underlying loader function directly (e.g., for custom build script integration). Not common in standard Liferay development.

loaderFunction

✓ import loaderFunction from 'liferay-npm-bundler-loader-style-loader';

✗ import { loaderFunction } from 'liferay-npm-bundler-loader-style-loader';

For programmatic use in an ESM environment, assuming the package exports its main loader function as a default export. This is not the primary way to use the loader within a Liferay project.

This configuration snippet for `.npmbundlerrc` demonstrates how to enable `style-loader` for `.css` files and how to combine it with `sass-loader` for `.scss` files within the Liferay npm bundler build process, ensuring styles are correctly processed and injected into the HTML.

{ "rules": [ { "test": "\\.css$", "use": ["style-loader"] }, { "test": "\\.scss$", "use": ["style-loader", "sass-loader"] } ] }

Debug

Known issues

breakingThis loader is specifically designed for the Liferay npm bundler and the Liferay DXP platform. It may not function correctly, or at all, with other generic build tools (e.g., Webpack, Rollup) or outside of the Liferay DXP environment. Attempting to use it in incompatible setups will lead to build failures.

fix

Ensure your development environment is within a Liferay DXP project utilizing the `liferay-npm-bundler` for module builds. This package is part of the Liferay frontend tooling ecosystem and expects that context.

affects: all

gotchaNode.js version compatibility is critical. The broader Liferay frontend tooling ecosystem, including related `npm-scripts` packages, has seen updates for Node.js v20. Using an incompatible Node.js version might lead to unexpected build failures or runtime errors when processing assets.

fix

Upgrade Node.js to v20 or a higher version officially supported by your Liferay DXP instance. Always refer to Liferay's official documentation for the recommended Node.js version for your specific DXP release to ensure full compatibility.

affects: <=18 (for newer Liferay projects)

gotchaBy default, CSS injected by `style-loader` typically has global scope, which can lead to style collisions in large or complex applications if not managed carefully. This behavior is inherent to how `style-loader` operates.

fix

Adopt a robust CSS methodology (e.g., BEM, utility-first CSS) or investigate if your Liferay bundler setup supports advanced features like CSS Modules. Plan your CSS architecture to prevent unintended style overrides and ensure modularity.

affects: all

Errors

Common errors & fixes

Module not found: Can't resolve 'style-loader' in '...' or 'Can't resolve 'liferay-npm-bundler-loader-style-loader' in '...'

The `liferay-npm-bundler-loader-style-loader` package or its peer dependency `style-loader` is not installed, or the `.npmbundlerrc` configuration is pointing to an incorrect path or name.

fix

Run `npm install --save-dev liferay-npm-bundler-loader-style-loader style-loader` to ensure both packages are installed. Then, verify your `.npmbundlerrc` file's `rules` section has `"style-loader"` correctly specified in the `use` array.

CSS is not being applied to my component even after configuration.

The `test` regular expression in your `.npmbundlerrc` file might not be correctly matching your CSS files, or the `use` array for the `style-loader` is improperly configured or ordered.

fix

Review the `test` regular expression in your `.npmbundlerrc` to confirm it accurately targets your CSS files (e.g., `"test": "\\.css$"`). Ensure `"style-loader"` is included and correctly ordered within the `use` array for the relevant file types.

Upgrade

Version history

2.32.2latest on npm

Audit

Dependencies

liferay-npm-bundlerrequiredCore dependency for the Liferay build system that utilizes this loader. This package cannot function without the Liferay npm bundler being part of the build chain.

style-loaderrequiredThis package wraps and integrates the standard `style-loader` functionality within the Liferay build environment. It acts as an adapter for the Liferay bundler.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/liferay/liferay-frontend-projects ↗

packagehttps://www.npmjs.com/package/liferay-npm-bundler-loader-style-loader ↗

homepagehttps://liferay.dev ↗