6
votes

Importer et lire le contenu d'un fichier CSS sous forme de texte (React / webpack)

Ce que j'essaie de faire est d'importer le fichier css, de lire son contenu, puis de créer un tableau de noms de classe.

Cependant, ce qui suit produit un journal des objets vides.

import TextCSS from './textfield.css'
console.log(TextCSS)

J'ai cherché sur le NPM un package qui pourrait faire cela, Github et Google, ont essayé quelques packages avec des noms prometteurs, mais pour l'instant rien.

javascript reactjs css

1 commentaires

avez-vous essayé fsread? w3schools.com/nodejs/nodejs_filesystem.asp

3 Réponses :

0
votes

Si vous utilisez webpack, essayez d'utiliser https: //www.npmjs .com / package / css-to-string-loader chargeur

var styleString = require('css-to-string-loader!css-loader!./file.css');

1 commentaires

Obtenir ceci: Inattendu '!' dans 'css-to-string-loader! css-loader! ./ textfield.css'. N'utilisez pas la syntaxe d'importation pour configurer les chargeurs Webpack import / no-webpack-loader-syntax

0
votes

Essayez cette configuration

const css = require('./test.css').toString();

il semble que vous devriez également être en mesure d'importer le fichier css, puis d'appeler une chaîne dessus si vous avez la configuration du plugin 'css-loader'

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['to-string-loader', 'css-loader'],
      },
    ],
  },
};

0 commentaires

0
votes

Vous pouvez charger le fichier css en tant que module dans React, mais il doit être nommé avec mystyle.module.css nut juste mystyle.css . Ensuite, vous pouvez faire

import styles from './mystyles.module.css'
console.log(styles)

En savoir plus sur les modules CSS React: https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet En savoir plus sur les modules CSS: https://css-tricks.com/css- modules-part-1-besoin /

0 commentaires