How to output CSS file contents as strings in Rollup?

Import CSS file contents as JavaScript strings in Rollup

When using Rollup to package JavaScript projects, importing the CSS file directly and using its contents as a string is not the default behavior of Rollup. Trying to import a CSS file directly will result in an "unexpected token" error, prompting that the plug-in needs to handle non-JavaScript files.

The solution is to use rollup-plugin-import-css plugin. This plug-in enables you to import CSS files into JavaScript modules and export CSS contents as strings.

Step 1: Install the plug-in

Install rollup-plugin-import-css using npm or yarn:

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

Step 2: Configure Rollup

Add the plugin to your Rollup configuration file (such as rollup.config.js or rollup.config.ts ):

 import importCSS from 'rollup-plugin-import-css';

export default {
  input: 'src/index.ts', // Your entry file output: {
    file: 'dist/bundle.js', // output file format: 'cjs' // or other formats you need},
  plugins: [
    importCSS()
  ]
};

Step 3: Import CSS and use

In your JavaScript file (for example, src/index.ts ), you can import the CSS file like this:

 import styles from './styles.css';

console.log(styles); // styles now contains strings of CSS content

Now the styles variable will contain the entire contents of the styles.css file, rendering as a string. You can further process this string as needed, for example injecting it into

通过以上步骤，你就可以在 Rollup 中轻松地将 CSS 文件内容作为字符串导入并使用了。 记住替换 src/index.ts 和 dist/bundle.js 为你实际的文件路径。

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