I am using webpack with ReactJS and trying to figure out how to using normalize.css after npm installing it (https://necolas.github.io/normalize.css/).
我使用的webpack中包含了反应物,并试图找出如何使用normalize。npm安装后的css (https://necolas.github.io/normalize.css/)。
Is the normalize.css applied right away after npm installing it? How would I make edits to it if I wanted to?
是正常的。css在npm安装后立即应用?如果我想编辑的话,我该怎么做呢?
Thank you in advance and will be sure to vote up and accept answer
事先谢谢你,一定会投票接受你的回答
3 个解决方案
#1
36
You can use the npm-installed normalize.css
in the following way with React:
您可以使用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);
The result will be:
结果将是:
Notice that the text has been styled by normalize.css
.
注意,文本已经被normalizy .css样式化了。
To get it working, you need something similar to the following setup:
要使它工作,您需要类似以下设置:
1) Add the Javascript from above to index.js
1)将上面的Javascript添加到index.js中
2) Add normalize.css
(and friends) to package.json
:
2)添加正常化。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) Use the correct loaders in webpack.config.js
:
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) Add an index.html
file to see the results:
4)添加一个索引。查看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) Install everything
4)安装的一切
npm install
5) Start the Webpack devserver:
5)启动Webpack devserver:
./node_modules/.bin/webpack-dev-server --open
NOTE: I am using version 5.0.0
of normalize.css
. If you use version 6.0.0
or higher, the font will be different. All the opinionated rules were removed from normalize.css
in that version.
注意:我使用的是normalize.css的5.0.0版本。如果您使用版本6.0.0或更高版本,字体将不同。所有固执己见的规则都从规范化中删除了。css版本。
Update 17/5/2018: Updated to use Webpack 4 and React 16.
更新17/5 2018:更新为使用Webpack 4和React 16。
#2
-1
Once you import
or require
it will be included by webpack
unless you set it not to. For example:
一旦你导入或要求它将被包括在webpack,除非你设置它不。例如:
Note: Im using webpack 2
注意:我正在使用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']
})
}
]
}
the exclude
property will take care of that.
排除属性会处理这个。
Example:
例子:
// 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
hope this helps.
希望这个有帮助。
#3
-4
First, install or download normalize.css from GitHub.I would recommend download it.Then, There are then 2 main ways to make use of it.
首先,安装或下载normalize。从GitHub css。我建议你下载一下。然后,有两种主要的方法来利用它。
Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.
方法1:使用规范化。css作为您自己项目的基本css的起点,定制值以匹配设计的需求。
Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.
方法2:包括正常化。css未被修改并建立在它的基础上,如果有必要的话,重写css中的默认值。
i.e Just put these downloaded files into the project folder and add link to it by link tag
我。e将下载的文件放入项目文件夹中,并通过链接标签添加链接
link rel="stylesheet" type="text/css" href="normalize.css"
链接rel = "样式表" type = " text / css " href = " normalize.css "
NOTE href content should point to the folder where normalize is stored.
注意,href内容应该指向存储normalize的文件夹。
#1
36
You can use the npm-installed normalize.css
in the following way with React:
您可以使用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);
The result will be:
结果将是:
Notice that the text has been styled by normalize.css
.
注意,文本已经被normalizy .css样式化了。
To get it working, you need something similar to the following setup:
要使它工作,您需要类似以下设置:
1) Add the Javascript from above to index.js
1)将上面的Javascript添加到index.js中
2) Add normalize.css
(and friends) to package.json
:
2)添加正常化。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) Use the correct loaders in webpack.config.js
:
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) Add an index.html
file to see the results:
4)添加一个索引。查看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) Install everything
4)安装的一切
npm install
5) Start the Webpack devserver:
5)启动Webpack devserver:
./node_modules/.bin/webpack-dev-server --open
NOTE: I am using version 5.0.0
of normalize.css
. If you use version 6.0.0
or higher, the font will be different. All the opinionated rules were removed from normalize.css
in that version.
注意:我使用的是normalize.css的5.0.0版本。如果您使用版本6.0.0或更高版本,字体将不同。所有固执己见的规则都从规范化中删除了。css版本。
Update 17/5/2018: Updated to use Webpack 4 and React 16.
更新17/5 2018:更新为使用Webpack 4和React 16。
#2
-1
Once you import
or require
it will be included by webpack
unless you set it not to. For example:
一旦你导入或要求它将被包括在webpack,除非你设置它不。例如:
Note: Im using webpack 2
注意:我正在使用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']
})
}
]
}
the exclude
property will take care of that.
排除属性会处理这个。
Example:
例子:
// 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
hope this helps.
希望这个有帮助。
#3
-4
First, install or download normalize.css from GitHub.I would recommend download it.Then, There are then 2 main ways to make use of it.
首先,安装或下载normalize。从GitHub css。我建议你下载一下。然后,有两种主要的方法来利用它。
Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.
方法1:使用规范化。css作为您自己项目的基本css的起点,定制值以匹配设计的需求。
Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.
方法2:包括正常化。css未被修改并建立在它的基础上,如果有必要的话,重写css中的默认值。
i.e Just put these downloaded files into the project folder and add link to it by link tag
我。e将下载的文件放入项目文件夹中,并通过链接标签添加链接
link rel="stylesheet" type="text/css" href="normalize.css"
链接rel = "样式表" type = " text / css " href = " normalize.css "
NOTE href content should point to the folder where normalize is stored.
注意,href内容应该指向存储normalize的文件夹。