react中使用css

安装css的loader

cnpm i style-loader css-loader -D

配置loader

在webpack.config.js的module>rules下配置规则

module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    }

webpack.config.js完整代码如下

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');//导入 在内存中自动生成index页面的插件

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template:path.join(__dirname,'./src/index.html'),//源文件
    filename:'index.html'//生成的内存中的首页名称
})
module.exports = {
    mode:'development', //development开发。production 发布
    plugins:[
        htmlPlugin
    ],
    module: {
        rules: [
            {
                test: /\.js|jsx$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    },
    resolve:{
        extensions:['.js','.jsx','.json'],//表示这几个的后缀名可以参略
        alias:{
            '@':path.join(__dirname,'./src')
        }
    }

}

使用css

在src>css创建CmtList.css文件

.title{
    color: red;
}

如图

image.png

然后导入

import cssobj from '@/css/CmtList.css'

使用时设置className即可

这是评论组件

完整代码如下

import cssobj from '@/css/CmtList.css'

//  导入子组件
import CmtItem from '@/components/CmtItem'

export default class CmList extends React.Component{
    constructor(){
        super()
        this.state = {
            ComentList:[
                {id:1,user:'pawn',content:'哈哈'},
                {id:2,user:'pawn_C',content:'呵呵'}
            ]
        }
    }
    render(){
        return 

        
这是评论组件
        {this.state.ComentList.map(item => )}
        
    }
}

css模块化

上面操作过后，我们发现导入css后，其他没有导入css的模块的样式也被影响了，这样就可能导致命名冲突和全局污染。
那么如何模块化呢
修改webpack.config.js，在"css_loader"后加"?modules"
代码如下

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');//导入 在内存中自动生成index页面的插件

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template:path.join(__dirname,'./src/index.html'),//源文件
    filename:'index.html'//生成的内存中的首页名称
})
module.exports = {
    mode:'development', //development开发。production 发布
    plugins:[
        htmlPlugin
    ],
    module: {
        rules: [
            {
                test: /\.js|jsx$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader?modules']
            }
        ]
    },
    resolve:{
        extensions:['.js','.jsx','.json'],//表示这几个的后缀名可以参略
        alias:{
            '@':path.join(__dirname,'./src')
        }
    }

}

引用代码如下

import React from 'react'//创建组件、虚拟dom元素，生命周期

import cssobj from '@/css/CmtList.css'

//  导入子组件
import CmtItem from '@/components/CmtItem'

export default class CmList extends React.Component{
    constructor(){
        super()
        this.state = {
            ComentList:[
                {id:1,user:'pawn',content:'哈哈'},
                {id:2,user:'pawn_C',content:'呵呵'}
            ]
        }
    }
    render(){
        return 

        
这是评论组件
        {this.state.ComentList.map(item => )}
        
    }
}