安裝css的loader

cnpm i style-loader css-loader -D

配置loader

在webpack.config.js的module>rules下配置規(guī)則

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

webpack.config.js完整代碼如下

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');//導(dǎo)入 在內(nèi)存中自動(dòng)生成index頁(yè)面的插件

//創(chuàng)建一個(gè)插件的實(shí)例對(duì)象
const htmlPlugin = new HtmlWebPackPlugin({
    template:path.join(__dirname,'./src/index.html'),//源文件
    filename:'index.html'//生成的內(nèi)存中的首頁(yè)名稱(chēng)
})
module.exports = {
    mode:'development', //development開(kāi)發(fā)赦颇。production 發(fā)布
    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'],//表示這幾個(gè)的后綴名可以參略
        alias:{
            '@':path.join(__dirname,'./src')
        }
    }

}

使用css

在src>css創(chuàng)建CmtList.css文件

.title{
    color: red;
}

如圖

image.png

然后導(dǎo)入

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

使用時(shí)設(shè)置className即可

<h1 className="title">這是評(píng)論組件</h1>

完整代碼如下

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

//  導(dǎo)入子組件
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 <div>
        <h1 className="title">這是評(píng)論組件</h1>
        {this.state.ComentList.map(item => <CmtItem {...item} key={item.id}></CmtItem>)}
        </div>
    }
}

css模塊化

上面操作過(guò)后二鳄，我們發(fā)現(xiàn)導(dǎo)入css后，其他沒(méi)有導(dǎo)入css的模塊的樣式也被影響了媒怯，這樣就可能導(dǎo)致命名沖突和全局污染订讼。
那么如何模塊化呢
修改webpack.config.js，在"css_loader"后加"?modules"
代碼如下

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');//導(dǎo)入 在內(nèi)存中自動(dòng)生成index頁(yè)面的插件

//創(chuàng)建一個(gè)插件的實(shí)例對(duì)象
const htmlPlugin = new HtmlWebPackPlugin({
    template:path.join(__dirname,'./src/index.html'),//源文件
    filename:'index.html'//生成的內(nèi)存中的首頁(yè)名稱(chēng)
})
module.exports = {
    mode:'development', //development開(kāi)發(fā)扇苞。production 發(fā)布
    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'],//表示這幾個(gè)的后綴名可以參略
        alias:{
            '@':path.join(__dirname,'./src')
        }
    }

}

引用代碼如下

import React from 'react'//創(chuàng)建組件欺殿、虛擬dom元素，生命周期

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

//  導(dǎo)入子組件
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 <div>
        <h1 className={cssobj.title}>這是評(píng)論組件</h1>
        {this.state.ComentList.map(item => <CmtItem {...item} key={item.id}></CmtItem>)}
        </div>
    }
}