本小节主要讲述在 React中使用css scss 以及其他第三方如bootstrap的css样式配置
1 前言
在 JSX 中，如果需要写行内样式，不能为 style 设置字符串的值，而是应该写成
style={{ color:'red',zIndex:3}}
在一个使用案例中上一篇中有写到，未设置样式前
在这里插入图片描述
设置style 样式后
在这里插入图片描述
import React from 'react';
import CourseItem from '@/components/CourseItem';
//父组件
export default class CourseList extends React.Component {
constructor(props) {
super(props);
this.state = {
courseList: [
{id: 1, userNmae: '张三', courseName: '语文'},
{id: 2, userNmae: '张三2', courseName: '语文2'},
{id: 3, userNmae: '张三3', courseName: '语文3'}
]
};
}
render() {
return (
{/*在JSX中行内样式需要如下这样写*/}
{/*需要注意的是，如果是纯数字类型的可以不写引号，如果是字符串类型的必须使用字符串包裹*/}
课程统计列表
{/*这里通过map 来构建*/}
{this.state.courseList.map(item => 列表中条目的组件
//列表中条目的组件
import React from 'react';
export default class CourseItem extends React.Component {
render() {
return (
姓名：{this.props.userNmae}
课程内容： {this.props.courseName}
);
}
}
ReactDOM.render 渲染使用
//用来创建组件、虚拟DOM元素 生命周期
import React from 'react';
//所创建好的组件和虚拟DOM放到页面上展示
import ReactDOM from 'react-dom';
import CourseList from '@/components/CourseList'
//第三步 使用ReactDOM 把虚拟DOM 渲染到页面上
// 参数一 要渲染的虚拟DOM元素
// 参数二 指定页面上的容器
ReactDOM.render(在上述案例代码中，通过行内设置样式，代码方面有点臃肿，所以在上述的案例中，我们可以把行内设置的样式进一步封装
2 对style样式的封装
2.1 第一层封装
//列表中条目的组件
import React from 'react';
//第一层封装
const itemStyle = {border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 5px'};
const itemUserStyle = {fontSize: '14px'};
const itemCourseStyle = {fontSize: '12px'};
export default class CourseItem extends React.Component {
render() {
return (
姓名：{this.props.userNmae}
课程内容： {this.props.courseName}
);
}
}
2.2 第二层封装
import React from 'react';
//第二层封装
const courseItemStyle={
item:{border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 5px'},
itemUser:{fontSize:"14px"},
itemCourse:{fontSize:"12px"}
}
export default class CourseItem extends React.Component {
render() {
return (
姓名：{this.props.userNmae}
课程内容： {this.props.courseName}
);
}
}
2.3 第三层封装 封装成单独的js文件
在这里插入图片描述
然后在使用的时候引入文件
//用来创建组件、虚拟DOM元素 生命周期
import React from 'react';
//所创建好的组件和虚拟DOM放到页面上展示
import ReactDOM from 'react-dom';
import CourseList from '@/components/CourseList'
//第三步 使用ReactDOM 把虚拟DOM 渲染到页面上
// 参数一 要渲染的虚拟DOM元素
// 参数二 指定页面上的容器
ReactDOM.render(3 使用css样式文件
安装style-loader
cnpm i style-loader css-loader -d
然后在 webpack.config.js 中配置
在这里插入图片描述
然后创建 css 样式表
在这里插入图片描述
然后在使用的时候引入 css 文件
在这里插入图片描述
在上述中通过 import 导入了 css 样式文件，这个样式文件中设定的样式默认是在全局上都有作用，所以这里可以定义 css 样式的作用域，在 webpack.config.js 文件中配置 css-loader 的模块化
const path = require('path');
//导入插件
const HtmlWebPackPlugin = require('html-webpack-plugin');
//创建插件
const htmlPlugin = new HtmlWebPackPlugin({
template:path.join(__dirname,'./src/index.html'),//源文件
filename: 'index.html' //生成内存中首页面的名称
});
//Node.js 两种导出模块的方式：module.exports和exports
//module和exports是Node.js给每个js文件内置的两个对象
//webpack 默认只能打包处理 .js 后缀名类型的文件
module.exports = {
mode: 'development',// production development
//引用插件
plugins: [
htmlPlugin
],
//所有的第三方模块的配置规则
module: {
//匹配规则
rules: [
{test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/},
// modules 为精通的css样式文件启动模块化
{test:/\.css$/,use:['style-loader','css-loader?modules']}
]
},
resolve: {
//这里配置这几个文件的后缀名可以省略不写
extensions: ['.js','.jsx','.json','.css'],
//配制别名@ 表示项目根目录中 src的这一层路径
alias:{'@':path.join(__dirname,'./src')}
}
};
启用 css-loader 的模块化功能后，在使用css样式时
在这里插入图片描述
在这里需要注意的是，css 模块化，只针对 类选择器与 ID 选择器，不会将标签选择器模块化
在这里插入图片描述
在上述效果图中，我们可以看到实际中的class名称是自动行形成的，在这里，我们可以 通过 css-loader 添加参数 localIdentName 来自定义生成的类名格式
- [ path ] 表示样式表相对于根目录所在的路径
- [ name ] 表示样式表文件名称
- [ local ] 表示样式的类名定义名称
- [ hash:length ] 表示32位的 hash 值
例如我们配置如下的规则
//所有的第三方模块的配置规则
module: {
//匹配规则
rules: [
{test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/},
// modules 为精通的css样式文件启动模块化
// 这里通过 localIdentName 来配置生成的类名
{test:/\.css$/,use:['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]']}
]
},
上述这样配置是 css-loader 老版本的写法，如果css-loader用的新版本，那么会有异常
ERROR in ./src/css/CourseList.css (./node_modules/[email protected]@css-loader/dist/cjs.js?modules&localIdentName=[path][name]-[local]-[hash:5]!./src/css/CourseList.css)
Module build failed (from ./node_modules/[email protected]@css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'localIdentName'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }
at validate (/Volumes/code/react-study/demo2/node_modules/[email protected]@schema-utils/dist/validate.js:85:11)
at Object.loader (/Volumes/code/react-study/demo2/node_modules/[email protected]@css-loader/dist/index.js:34:28)
@ ./src/css/CourseList.css 2:26-168 22:4-35:5 25:25-167
@ ./src/components/CourseList.jsx
@ ./src/index.js
那么在高版本的 css-loader 中 ，webpack.config.js 中可以这样配置
//所有的第三方模块的配置规则
module: {
//匹配规则
rules: [
{test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/},
// modules 为精通的css样式文件启动模块化
// 这里通过 localIdentName 来配置生成的类名
{
test: /\.css$/, use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules:{
getLocalIdent: (context, localIdentName, localName, options) => {
return localName;
},
}
}
}
]
}
]
},
然后在浏览器中
在这里插入图片描述
在实际开发中，对与 css 文件中启动了模块化，那么当使用 :global 关键字包裹的 类选择器不会被配置模块化
.title {
color: red;
text-align: center;
font-size: 16px;
}
/*这里是全局的*/
:global(.test) {
color: green;
font-size: 18px;
}
4 使用其他三方样式库
例如使用 bootstrap
cnpm i [email protected] -S
cnpm i sass-loader node-sass -D
cnpm i url-loader -D
cnpm i file-loader -D
处理css中的图片资源时，我们常用的两种loader是file-loader或者url-loader，两者的主要差异在于。url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数。
sass-loader 用来加载 SASS / SCSS 文件并将其编译为 CSS，
sass-loader 依赖于node-sass
项目中自己创建的样式表定义为 .scss 文件，第三方的样式表还是以 .css 结尾，那么在当前项目中只为自己项目中创建的 .scss 文件启动模块化
然后在 webpack.config.js 中配置
const path = require('path');
//导入插件
const HtmlWebPackPlugin = require('html-webpack-plugin');
//创建插件
const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname, './src/index.html'),//源文件
filename: 'index.html' //生成内存中首页面的名称
});
//Node.js 两种导出模块的方式：module.exports和exports
//module和exports是Node.js给每个js文件内置的两个对象
//webpack 默认只能打包处理 .js 后缀名类型的文件
module.exports = {
mode: 'development',// production development
//引用插件
plugins: [
htmlPlugin
],
//所有的第三方模块的配置规则
module: {
//匹配规则
rules: [
{test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/},
// modules 为精通的css样式文件启动模块化
// 这里通过 localIdentName 来配置生成的类名
// 一般第三方的样式表都是 .css 结尾的，然后自己项目中创建的样式表可以使用 .scss 或者 less 结尾
{
test: /\.scss$/, use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules:{
getLocalIdent: (context, localIdentName, localName, options) => {
return localName;
},
}
}
},
'sass-loader'
]
},
// 这里配置 css 的规则
{test:/\.css$/, use: ['style-loader','css-loader']},
// 这里配置 字体等规则
{test:/\.ttf|woff|woff2|eot|svg$/,use:'url-loader'},
]
},
resolve: {
//这里配置这几个文件的后缀名可以省略不写
extensions: ['.js', '.jsx', '.json', '.css','.scss'],
//配制别名@ 表示项目根目录中 src的这一层路径
alias: {'@': path.join(__dirname, './src')}
}
};
然后在项目中 使用 bootstrap
在这里插入图片描述
然后效果预览
在这里插入图片描述
完结