web-dev-qa-db-ja.com

webpackでnpm installを使用してnormalize.cssを使用するには？

ReactJSでwebpackを使用し、npmをインストールしてからnormalize.cssを使用する方法を見つけようとしています（ https://necolas.github.io/normalize.css/ ）。

Npmをインストールした直後にnormalize.cssが適用されますか？必要に応じて編集するにはどうすればよいですか？

事前に感謝し、必ず投票して回答を受け入れます

javascripthtmlcssnpmwebpack
43
Dan Me

Reactでは、npm-installed normalize.cssを次の方法で使用できます。

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);

結果は次のようになります。

Text styled by normalize.css

テキストのスタイルがnormalize.cssになっていることに注意してください。

動作させるには、次のセットアップに似たものが必要です。

1）上記のJavascriptをindex.jsに追加します

2）normalize.css（および友人）を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）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）index.htmlファイルを追加して、結果を確認します。

<!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）すべてをインストールする

npm install

5）Webpack devserverを開始します。

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

注：バージョン5.0.0 of normalize.cssを使用しています。バージョン6.0.0以降を使用する場合、フォントは異なります。そのバージョンのnormalize.cssからすべての意見のルールが削除されました。

2018年5月17日更新：Webpack 4およびReact 16.を使用するように更新しました。

58
jumoel

追加：WebPack 4を使用していて、normalize.lessをインポートできない場合は、normalize.cssを試してください。

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

そして私のルール：

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