安装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;
}
如图
![](https://img.haomeiwen.com/i15874139/c0db888e6fe560de.png)
然后导入
import cssobj from '@/css/CmtList.css'
使用时设置className即可
<h1 className="title">这是评论组件</h1>
完整代码如下
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 <div>
<h1 className="title">这是评论组件</h1>
{this.state.ComentList.map(item => <CmtItem {...item} key={item.id}></CmtItem>)}
</div>
}
}
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 <div>
<h1 className={cssobj.title}>这是评论组件</h1>
{this.state.ComentList.map(item => <CmtItem {...item} key={item.id}></CmtItem>)}
</div>
}
}
网友评论