Tôi đang sử dụng webpack với ReactJS và cố gắng tìm ra cách sử dụng normalize.css sau khi cài đặt npm (https://necolas.github.io/normalize.css/).Làm thế nào để sử dụng normalize.css bằng cách sử dụng npm cài đặt với webpack?
Ứng dụng normalize.css có được áp dụng ngay sau khi cài đặt không? Làm thế nào tôi có thể chỉnh sửa nó nếu tôi muốn?
Cảm ơn bạn trước và chắc chắn sẽ bỏ phiếu lên và chấp nhận câu trả lời
Đầu tiên, cài đặt hoặc tải normalize.css từ GitHub.I muốn giới thiệu tải it.Then, Có sau đó 2 cách chính để tận dụng của nó.
Cách tiếp cận 1: sử dụng normalize.css làm điểm bắt đầu cho CSS cơ sở của dự án của riêng bạn, tùy chỉnh giá trị để phù hợp với yêu cầu của thiết kế.
Cách tiếp cận 2: bao gồm normalize.css bị ảnh hưởng và xây dựng dựa trên nó, ghi đè các giá trị mặc định sau trong CSS của bạn nếu cần.
tức là Chỉ cần đặt những tập tin tải về vào thư mục dự án và thêm liên kết đến nó bằng thẻ liên kết
link rel = "stylesheet" type = "text/css" href = "normalize.css"
Nội dung CHÚ Ý nên trỏ đến thư mục lưu trữ bình thường.
Khi bạn import hoặc require, nó sẽ được bao gồm bởi webpack trừ khi bạn đặt không. Ví dụ:
Lưu ý: Im sử dụng 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']
})
}
]
}
các exclude bất động sản sẽ chăm sóc đó.
Ví dụ:
// 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
hy vọng điều này giúp.
Xin lỗi, nhưng bạn có thể làm rõ nơi tôi sẽ làm 'import' hoặc' require'? Và làm cách nào tôi có thể chỉnh sửa tờ chuẩn hóa? –
Thông thường những gì tôi làm là 'import' hoặc' require' nó trên điểm vào của tôi thường là 'index.js'. Sau đó, webpack sẽ chăm sóc phần còn lại. Nếu bạn muốn chỉnh sửa trang 'normalize' thì bạn có thể làm như vậy trong một dự án rất đơn giản (trực tiếp chỉnh sửa tập tin) – ickyrr
Hoặc trong trường hợp này, vì nó là một gói nút, bạn có thể tạo một' style.css mới 'và nhập nó vào tệp nhập của bạn để làm cho nó có sẵn cho tất cả các thành phần của bạn. – ickyrr
Bạn có thể sử dụng NPM cài normalize.css theo cách sau với Phản ứng:
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);
Kết quả sẽ là:
Chú ý rằng các văn bản đã được theo kiểu của normalize.css.
Để làm cho nó làm việc, bạn cần một cái gì đó tương tự như các thiết lập sau:
1) Thêm Javascript từ trên để index.js
2) Thêm normalize.css (và bạn bè) để 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) Sử dụng bộ tải chính xác trong 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) Thêm một tập tin index.html để xem kết quả:
<!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) Cài đặt tất cả mọi thứ
npm install
5) Khởi động devserver Webpack:
./node_modules/.bin/webpack-dev-server --open
LƯU Ý: Tôi đang sử dụng phiên bản 5.0.0 của normalize.css. Nếu bạn sử dụng phiên bản 6.0.0 hoặc cao hơn, phông chữ sẽ khác. Tất cả các quy tắc được đánh giá đã bị xóa khỏi normalize.css trong phiên bản đó.
Tôi là React n00b và đã tìm thấy thông qua Google. Cho đến hôm nay, các tài liệu chuẩn hóa cho bạn thấy dòng lệnh 'npm install', nhưng không đề cập rõ ràng tên gói có thể nhập (nó khác với tên cài đặt), hoặc cách sử dụng nó sau ... do đó, Tôi rất biết ơn câu trả lời này. =) –
Tôi đã phải sử dụng 'import 'normalize-css/normalize.css'', chỉ cần nhập' normalize.css sẽ tìm nó trong thư mục hiện tại –
@GreyVugrin' normalize-css' không giống với 'normalize. css'. 'normalize-css' chưa được cập nhật từ năm 2014: https://github.com/chrisdickinson/normalize-css – jumoel
Tin câu hỏi của tôi vẫn đứng vững. Nếu tôi cài đặt nó thì sao? –