Comment sortir le contenu du fichier CSS en tant que chaînes dans Rollup?

Importer le contenu du fichier CSS sous forme de chaînes JavaScript dans Rollup

Lorsque vous utilisez Rollup pour emballer des projets JavaScript, l'importation du fichier CSS directement et l'utilisation de son contenu en tant que chaîne n'est pas le comportement par défaut de Rollup. Essayer d' import un fichier CSS directement entraînera une erreur de "jeton inattendu", ce qui invite au plug-in doit gérer les fichiers non javascript.

La solution consiste à utiliser rollup-plugin-import-css . Ce plug-in vous permet d'importer des fichiers CSS dans des modules JavaScript et d'exporter le contenu CSS sous forme de chaînes.

Étape 1: Installez le plug-in

Installez rollup-plugin-import-css à l'aide de NPM ou de fil:

 NPM Installer Rollup-Plugin-Import-CSS - Save-DEV

Étape 2: Configurer Rollup

Ajoutez le plugin à votre fichier de configuration Rollup (tel que rollup.config.js ou rollup.config.ts ):

 Importer des importations à partir de «Rollup-Plugin-Import-CSS»;

Exporter par défaut {
  Entrée: 'src / index.ts', // Sortie de votre fichier d'entrée: {
    Fichier: 'dist / bundle.js', // Format de fichier de sortie: 'cjs' // ou d'autres formats dont vous avez besoin},
  Plugins: [
    importcss ()
  ]]
};

Étape 3: Importer CSS et utiliser

Dans votre fichier javascript (par exemple, src/index.ts ), vous pouvez importer le fichier CSS comme ceci:

 Importez des styles de './styles.css';

console.log (styles); // Styles contient désormais des chaînes de contenu CSS

Maintenant, la variable styles contiendra l'intégralité du contenu du fichier styles.css , rendant sous forme de chaîne. Vous pouvez en outre traiter cette chaîne selon les besoins, par exemple l'injection dans

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!