Как использовать normalize.css с помощью npm install with webpack?

Я использую webpack с ReactJS и пытаюсь выяснить, как использовать normalize.css после npm, устанавливая его (https://necolas.github.io/normalize.css/).

Применяется ли normalize.css сразу после установки npm? Как мне внести изменения, если я захочу?

Спасибо заранее и обязательно проголосуйте и примите ответ

Ответы

Ответ 1

Вы можете использовать установленный npm normalize.css следующим образом: 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);

Результат будет:

Текст в стиле normalize.css

Обратите внимание, что текст был стилизован под normalize.css.

Чтобы заставить его работать, вам нужно что-то похожее на следующую настройку:

1) Добавьте Javascript сверху в index.js

2) Добавьте normalize.css (и друзей) в package.json:

{
    "dependencies": {
        "normalize.css": "^5.0.0",
        "react": "^15.4.2",
        "react-dom": "^15.4.2"
    },
    "devDependencies": {
        "babel-core": "^6.23.1",
        "babel-loader": "^6.3.1",
        "babel-preset-env": "^1.1.8",
        "babel-preset-react": "^6.23.0",
        "css-loader": "^0.26.1",
        "style-loader": "^0.13.1",
        "webpack": "^2.2.1",
        "webpack-dev-server": "^2.3.0"
    }
}

3) Используйте правильные загрузчики в webpack.config.js:

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, './index.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js',
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: path.resolve(__dirname, './node_modules'),
                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="bundle.js"></script>
</body>
</html>

4) Установите все

npm install

5) Запустите Webpack devserver:

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

ПРИМЕЧАНИЕ. Я использую версию 5.0.0 для normalize.css. Если вы используете версию 6.0.0 или выше, шрифт будет отличаться. Все одобренные правила были удалены из normalize.css в этой версии.

Ответ 2

Как только вы import или require, он будет включен webpack, если вы его не установили. Например:

Примечание: Im использует 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']
            })
        }
    ]
}

свойство exclude позаботится об этом.

Пример:

// 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

надеюсь, что это поможет.

Ответ 3

Сначала установите или загрузите normalize.css из GitHub.I бы порекомендовал скачать его. Тогда есть 2 основных способа его использования.

Подход 1: используйте normalize.css в качестве отправной точки для собственной базы проектов CSS, настраивая значения, соответствующие требованиям к дизайну.

Подход 2: включить normalize.css нетронутым и построить на нем, переопределяя значения по умолчанию позже в вашем CSS, если это необходимо.

i.e Просто поместите эти загруженные файлы в папку проекта и добавьте ссылку на него тегом ссылки

link rel= "stylesheet" type = "text/css" href= "normalize.css"

ПРИМЕЧАНИЕ. Содержимое href должно указывать на папку, в которой сохраняется нормализация.