J'utilise Webpack avec ReactJS et j'essaie de comprendre comment utiliser normalize.css après son installation par npm ( 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
Vous pouvez utiliser le npm-installé normalize.css de la manière suivante à Réagir:
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:
Notez que le texte a été décoré par l' normalize.css.
Pour le faire fonctionner, vous avez besoin de quelque chose de similaire à la configuration suivante:
1) Ajouter le code Javascript à partir de ci-dessus pour index.js
2) Ajouter l' normalize.css (et amis) de 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) Utiliser la bonne chargeurs en 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) Ajouter un index.html le fichier 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) Installer le tout
npm install
5) Démarrer le Webpack devserver:
./node_modules/.bin/webpack-dev-server --open
NOTE: je suis l'aide de la version 5.0.0 de normalize.css. Si vous utilisez la version 6.0.0 ou plus, la police va être différente. Toutes les opinions règles ont été retirés de normalize.css dans cette version.
Mise à jour 17/5/2018: mis à Jour pour utiliser Webpack 4 et Réagir 16.
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"
]
}
]
};
Une fois que vous import ou require sera inclus par webpack sauf si vous le définissez pas. Par exemple:
Note: J'utilise WebPack 2
module: {
rules: [ // from 'loaders' to 'rules'
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.sass$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: ['style-loader','sass-loader']
})
}
]
}
la propriété exclude occupera.
Exemple:
// public/assets/style.scss
@import 'substyle1';
@import 'substyle1';
body {
background-color: red;
}
// src/index.js -> entry file
import '../public/assets/style.scss';
// Webpack will know that you are importing your SCSS / SASS file
J'espère que cela t'aides.
Tout d'abord, installer ou de télécharger normaliser.css à partir de GitHub.Je recommande de le télécharger.Ensuite, Il y a 2 façons de l'utiliser.
Approche 1: utilisation de la normaliser.css comme un point de départ pour votre propre projet de base de CSS, en personnalisant les valeurs correspondent aux exigences.
Approche 2: inclure les normaliser.css intacte et s'en inspirer, en remplaçant les valeurs par défaut plus tard dans votre CSS si nécessaire.
j'.e Viens de mettre ces fichiers téléchargés dans le dossier du projet et ajouter un lien par lien tag
link rel="stylesheet" type="text/css" href="normaliser.css"
NOTE href contenu doit pointer vers le dossier où normaliser est stockée.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
