Jak korzystać z normalize.css przy użyciu npm install with webpack?

Używam pakietu internetowego z ReactJS i próbuję dowiedzieć się, jak używać normalize.css po zainstalowaniu npm (https://necolas.github.io/normalize.css/).Jak korzystać z normalize.css przy użyciu npm install with webpack?

Czy plik normalize.css jest stosowany natychmiast po zainstalowaniu programu npm? Jak mogę to zmienić, jeśli chcę?

Dziękuję z góry i na pewno do głosowania i zaakceptować odpowiedź

Źródło

2017-02-08 Dan Me

-4

Najpierw należy zainstalować lub pobrać normalize.css z GitHub.I polecam pobierania it.Then, Są następnie 2 główne sposoby wykorzystują tego.

Podejście 1: użyj normalize.css jako punktu wyjścia dla własnego CSS projektu, dostosowując wartości do wymagań projektu.

Podejście 2: uwzględnij nietknięte pliki normalize.css i na ich podstawie nadpisaj wartości domyślne później, jeśli to konieczne.

tj Wystarczy umieścić te pobrane pliki w folderze projektu i dodać link do niego poprzez link tag

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

UWAGA Zawartość href powinna wskazywać na folder, w którym przechowywana jest normalizacja.

Źródło

2017-02-08 19:33:08 er1shivam

Wierz, moje pytanie wciąż jest aktualne. Co jeśli ja npm go zainstalowałem? –

-1

Po dodaniu import lub require zostanie on dołączony przez webpack, chyba że go ustawisz. Na przykład:

Uwaga: im przy 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'] 
      }) 
     } 
    ] 
}

własnością exclude zadba o to.

Przykład:

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

nadzieję, że to pomaga.

Źródło

2017-02-09 08:07:47 ickyrr

Przepraszam, ale czy mógłbyś wyjaśnić, gdzie zrobiłbym 'import' lub' require'? I w jaki sposób mogę edytować normalizację arkusza? –

Zwykle to, co robię, to 'import' lub' require' to na moim punkcie wejścia zwykle 'index.js'. Następnie resztą zajmie się pakiet sieciowy. Jeśli chcesz edytować "normalizuj" arkusz, możesz to zrobić tak jak w bardzo prostym projekcie (bezpośrednio edytując sam plik). – ickyrr

Lub w tym przypadku, ponieważ jest to pakiet węzłów, możesz utworzyć nowy plik 'style.css 'i zaimportuj go do pliku wejściowego, aby był dostępny dla wszystkich składników. – ickyrr

Można użyć npm zainstalowane normalize.css w następujący sposób z 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);

Rezultatem będzie:

Zauważ, że tekst został zaprojektowany przez normalize.css.

Aby to działa, trzeba coś podobnego do następującej konfiguracji:

1) Dodać Javascript od góry do index.js

2) Dodaj normalize.css (i przyjaciół) do 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) Za pomocą właściwych ładowarki w 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) Dodaj plik index.html aby zobaczyć wyniki:

<!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) zainstalować wszystko

npm install

5) Uruchom devserver WebPACK:

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

UWAGA: Używam wersji 5.0.0 z normalize.css. Jeśli używasz wersji 6.0.0 lub wyższej, czcionka będzie inna. Wszystkie uznane zasady zostały usunięte z wersji normalize.css w tej wersji.

Źródło

2017-02-15 09:50:20 jumoel

Jestem React n00b i znalazłem to przez Google. Na dzień dzisiejszy, normalize docs pokazuje wiersz polecenia dla "npm install", ale nie wspomina wyraźnie, czym jest importowana nazwa pakietu (różni się od nazwy instalacji), lub jak go użyć po ... Jestem bardzo wdzięczny za tę odpowiedź. =) –

Musiałem użyć 'import 'normalize-css/normalize.css'', wystarczy zaimportować' normalize.css szukałoby go w bieżącym katalogu –

@GreyVugrin' normalize-css' nie jest tym samym co 'normalize. css'. 'normalize-css' nie był aktualizowany od 2014: https://github.com/chrisdickinson/normalize-css – jumoel

Jak korzystać z normalize.css przy użyciu npm install with webpack?

Odpowiedz

Powiązane problemy