How to import a CSS file in Rollup and output it as a string?

CSS file import and string output in Rollup

When using Rollup to package a project, import styles from './styles.css' directly into the CSS file and expecting the styles variable to be a string will cause an error, because Rollup does not support non-JavaScript files by default. The solution is to use rollup-plugin-import-css plugin.

The following steps demonstrate how to use the plugin to output CSS content as a string:

1. Install plug-in: Use npm or yarn to install:

    npm install rollup-plugin-import-css --save-dev

2. Configure Rollup: Add plugin in rollup.config.js :

    import importCss from 'rollup-plugin-import-css';
   
   export default {
     input: 'index.ts',
     output: {
       file: 'bundle.js',
       format: 'cjs'
     },
     plugins: [
       importCss()
     ]
   };

3. Import and use: Import CSS in index.ts :

    import styles from './styles.css';
   
   console.log({ styles });

   After running rollup -c , styles variable will contain the CSS content string. This allows you to obtain the content of the CSS file as a string during the Rollup construction process, which is convenient for subsequent processing or embedding into JavaScript code.

The above is the detailed content of How to import a CSS file in Rollup and output it as a string?. For more information, please follow other related articles on the PHP Chinese website!