{"id":22053,"library":"rollup-plugin-hot-css","title":"rollup-plugin-hot-css","description":"A Rollup plugin for loading CSS files with Hot Module Replacement (HMR) support via Nollup. Version 0.7.2 is the latest release. It supports preprocessing with built-in scss and less loaders or custom loaders (including PostCSS), resolves asset URLs (images, fonts), and emits them as Rollup assets. HMR works by replacing the <link> tag href with a timestamp to force browser reload. Differentiates from other CSS plugins by focusing on HMR with Nollup and flexible loader chaining.","status":"active","version":"0.7.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install rollup-plugin-hot-css","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-hot-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-hot-css","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package does not ship ESM; use require() in CommonJS or use dynamic import in ESM.","wrong":"const hotcss = require('rollup-plugin-hot-css');","symbol":"default","correct":"import hotcss from 'rollup-plugin-hot-css'"},{"note":"Only CJS is supported. In ESM contexts, use createRequire or transpile.","wrong":"import hotcss from 'rollup-plugin-hot-css'","symbol":"require()","correct":"const hotcss = require('rollup-plugin-hot-css')"},{"note":"Does not include TypeScript declarations. Use custom type declaration or @ts-ignore.","wrong":"import type { RollupPluginHotCssOptions } from 'rollup-plugin-hot-css'","symbol":"TypeScript types","correct":"// @ts-ignore or declare module 'rollup-plugin-hot-css'"}],"quickstart":{"code":"// rollup.config.js\nconst hotcss = require('rollup-plugin-hot-css');\n\nmodule.exports = {\n  input: 'src/main.js',\n  output: {\n    dir: 'dist',\n    format: 'esm',\n    assetFileNames: '[name][extname]'\n  },\n  plugins: [\n    hotcss({\n      file: 'styles.css',\n      extensions: ['.css', '.scss'],\n      loaders: ['scss'],\n      hot: true,\n      publicPath: '/'\n    })\n  ]\n};","lang":"javascript","description":"Basic Rollup config using rollup-plugin-hot-css with SCSS preprocessing and HMR."},"warnings":[{"fix":"Set hot: false for production builds, or use Nollup development server.","message":"HMR only works with Nollup dev server, not Rollup's built-in watcher. Using hot:true without Nollup will cause errors.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Ensure each loader (especially custom ones) returns a sourcemap or disable url: false.","message":"Asset URLs are resolved only if sourcemaps are emitted by the previous loader. If missing, URLs may be broken.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Set assetFileNames to '[name][extname]' to get expected output filename.","message":"The 'file' option default is 'styles.css', but final name depends on assetFileNames Rollup output option, which can be confusing.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Always return a Promise object, not an object directly from the executor. Use async/await or new Promise(resolve => resolve({...})).","message":"Custom loaders can be async by returning a Promise, but many users forget to wrap resolve correctly in Promise constructor.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"For custom loaders, use a function that receives (input, id) and returns { code, map?, watchFiles? }.","message":"The 'loaders' array expects string names only for built-in loaders ('scss', 'less'); passing a function works but requires correct signature.","severity":"breaking","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"npm install sass --save-dev","cause":"The SCSS loader requires the 'sass' npm package to be installed but it is missing.","error":"Error: Cannot find module 'sass'"},{"fix":"Add '.css' to extensions and ensure a loader is present (e.g., loaders: [] for plain CSS).","cause":"The 'extensions' option does not include '.css' or loaders array is missing a suitable loader.","error":"Error: No loader found for .css"},{"fix":"Use require() or configuration with bundler that handles CJS interop.","cause":"Using ES import syntax with a package that only exports CommonJS.","error":"TypeError: hotcss is not a function"},{"fix":"Ensure you are using Nollup dev server. For Rollup-only builds, set hot: false.","cause":"Confusion with other Rollup HMR plugins; this plugin's hot option works only with Nollup.","error":"The 'hot' option is deprecated. Use HMR through Nollup only."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}