web-dev-qa-db-fra.com

Comment utiliser normalize.css en utilisant npm install with webpack?

J'utilise Webpack avec ReactJS et j'essaie de comprendre comment utiliser normalize.css après que NPM l'ait installé ( https://necolas.github.io/normalize.css/ ).

Est-ce que normalize.css est appliqué immédiatement après l’installation de npm? Comment pourrais-je le modifier si je le voulais?

Merci d'avance et soyez sûr de voter et d'accepter la réponse

javascripthtmlcssnpmwebpack
43
Dan Me

Vous pouvez utiliser le normalize.css Installé par npm de la manière suivante avec React:

import React from 'react';
import ReactDOM from 'react-dom';

import 'normalize.css'; // Note this

const root = document.getElementById('root');

ReactDOM.render(<h1>Hello, World!</h1>, root);

Le résultat sera:

Text styled by normalize.css

Notez que le texte a été stylé par normalize.css.

Pour que cela fonctionne, vous avez besoin de quelque chose de similaire à la configuration suivante:

1) Ajoutez le Javascript ci-dessus à index.js

2) Ajoutez normalize.css (Et amis) à package.json:

{
    "dependencies": {
        "normalize.css": "^5.0.0",
        "react": "^16.3.2",
        "react-dom": "^16.3.2"
    },
    "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "css-loader": "^0.28.11",
        "style-loader": "^0.21.0",
        "webpack-dev-server": "^3.1.4",
        "webpack": "^4.8.3"
    }
}

3) Utilisez les bons chargeurs dans webpack.config.js:

module.exports = {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                options: { presets: ['env', 'react'] }
            },
            {
                test: /\.css$/,
                use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
            }
        ]
    }
};

4) Ajoutez un fichier index.html Pour voir les résultats:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="root"></div>
  <script src="main.js"></script>
</body>
</html>

4) tout installer

npm install

5) Démarrez le devserver Webpack:

./node_modules/.bin/webpack-dev-server --open

REMARQUE: J'utilise la version 5.0.0 De normalize.css. Si vous utilisez la version 6.0.0 Ou une version ultérieure, la police sera différente. Toutes les règles avec opinion ont été supprimées de normalize.css Dans cette version.

Mise à jour 17/5/2018: Mise à jour pour utiliser Webpack 4 et React 16.

58
jumoel

Ajout: Si vous utilisez WebPack 4 et que vous ne pouvez pas importer normalize.less, essayez normalize.css.

@import "../node_modules/normalize.css/normalize.css";

Et mes règles:

module: {
    rules: [{
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader,
                "css-loader"
            ]
        },
        {
            test: /\.less$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                "less-loader"
            ]
        }
    ]
};
8
Timber Hjellum