{"id":13449,"library":"liferay-npm-bundler-loader-style-loader","title":"Liferay npm Bundler Style Loader","description":"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.","status":"active","version":"2.32.2","language":"javascript","source_language":"en","source_url":"https://github.com/liferay/liferay-frontend-projects","tags":["javascript"],"install":[{"cmd":"npm install liferay-npm-bundler-loader-style-loader","lang":"bash","label":"npm"},{"cmd":"yarn add liferay-npm-bundler-loader-style-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add liferay-npm-bundler-loader-style-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core 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.","package":"liferay-npm-bundler","optional":false},{"reason":"This package wraps and integrates the standard `style-loader` functionality within the Liferay build environment. It acts as an adapter for the Liferay bundler.","package":"style-loader","optional":false}],"imports":[{"note":"Primary usage: string reference in Liferay `.npmbundlerrc` configuration files to specify the loader for CSS assets. Not a direct JavaScript import.","symbol":"style-loader","correct":"\"style-loader\""},{"note":"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.","symbol":"loaderFunction","correct":"const loaderFunction = require('liferay-npm-bundler-loader-style-loader');"},{"note":"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.","wrong":"import { loaderFunction } from 'liferay-npm-bundler-loader-style-loader';","symbol":"loaderFunction","correct":"import loaderFunction from 'liferay-npm-bundler-loader-style-loader';"}],"quickstart":{"code":"{\n\t\"rules\": [\n\t\t{\n\t\t\t\"test\": \"\\\\.css$\",\n\t\t\t\"use\": [\"style-loader\"]\n\t\t},\n\t\t{\n\t\t\t\"test\": \"\\\\.scss$\",\n\t\t\t\"use\": [\"style-loader\", \"sass-loader\"]\n\t\t}\n\t]\n}","lang":"json","description":"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."},"warnings":[{"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.","message":"This 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.","severity":"breaking","affected_versions":"all"},{"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.","message":"Node.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.","severity":"gotcha","affected_versions":"<=18 (for newer Liferay projects)"},{"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.","message":"By 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.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"Module not found: Can't resolve 'style-loader' in '...' or 'Can't resolve 'liferay-npm-bundler-loader-style-loader' in '...'"},{"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.","cause":"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.","error":"CSS is not being applied to my component even after configuration."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}