1
votes

Ajout de fichiers css dans un projet React avec Webpack 4

Je crée une application React simple à partir de zéro à l'aide de Webpack. J'ai finalement pu exécuter le serveur de développement et quand j'ai essayé d'appliquer certains styles via CSS, les fichiers ne se chargeaient pas et je suppose que ma configuration Webpack 4 n'est pas correcte.

Voici le code:

webpack.config.js

 **src**
      |_assets
      |_componentns
      |_styles
        |_App.css
        |_index.css
      App.jsx
      index.js
      index.html

La structure de mon projet est comme ça, je n'inclurai que src car elle vit à la racine:

// const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const path = require('path');


module.exports = {
    mode: 'development',
    entry: ['./src/index.js'],
    resolve: {
        extensions: [".js", ".jsx"]
    },
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/dist',
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 8080
    },
    module: {
        rules: [
            {
                test: /\.js|.jsx$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ["react"]
                }

            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader'
            }
        ]
    },

};

Je voudrais pouvoir ajouter plusieurs fichiers css pour chaque composant que j'ai et les appliquer, et pouvoir styliser l'index index.html . Merci beaucoup pour votre aide.

reactjs webpack webpack-4

1 commentaires

Les fichiers css sont-ils injectés dans des balises style en html ? Essayez d'inspecter cela ...

3 Réponses :

2
votes

La configuration de votre webpack semble correcte. assurez-vous que vous importez les fichiers css requis dans vos composants.

import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <Child />
      </div>
    );
  }
}

1 commentaires

Je fais ça mais rien ne se voit. Je mettrai à jour le code.

1
votes

Tout ce que vous avez à faire est d'importer les fichiers CSS si nécessaire comme vous le feriez pour un module JavaScript. Donc, si vous souhaitez avoir une feuille de style pour toute votre application, vous pouvez importer une feuille de style globale dans votre index.js .

import './styles/App.css'

et vous pouvez faire de même pour chaque composant avec des styles spécifiques

import './styles/index.css';

auquel cas vous voudrez peut-être configurez les modules CSS pour éviter le chevauchement des noms de classe.

1 commentaires

Je l'ai déjà fait, ne fonctionne toujours pas et il n'y a pas d'erreur: /

1
votes

Ok, erreur de débutant ici, la façon dont j'ai configuré Webpack est que je dois d'abord le construire et ensuite exécuter le serveur de développement, pas l'inverse. Toutes les réponses ci-dessus sont valides et utiles, j'ai juste oublié d'exécuter la compilation après les modifications.

0 commentaires