webpack之引⼊css样式
由于webpack只识别标准的javascript语法,⽆法识别css语法，所有需要⽤专门的css-loader转换，然后再⽤style-loader构建在html页⾯1.新建style.css⽂件,app.css⽂件（控制react中的div样式）
body{
background: red;
}
.rea{background: orange}
2.在app.js引⼊style.css⽂件
import  React    from'React';
import  ReactDOM from'react-dom';
import './style.css';
import './app.css';
3.安装css-loader
cnmp i -D css-loader
4.安装style-loader
cnmp i -D style-loader
5.在fig.js⽂件配置style-loader,css-loader
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
entry:'./src/app.js',
output:{
solve(__dirname,'dist'),//绝对路径
filename:'main.js',
},
plugins:[//⽣成html
new htmlWebpackPlugin({
filename:'index.html',
template:'src/index.html'
})
],
module:{
rules:[{
test:/\.js$/,
use:[{
loader:'babel-loader',
options:{
presets:['react']
css文件怎么写}
},]
},
{
test:/\.css$/,
use:['style-loader','css-loader']//程序会先加载css-loader，然后在加载style-loader⽂件
}]
},
devServer:{
open:true,//⾃动打开服务器⾸页
port:9000,
inline:true,
}
}
6.在服务器中运⾏配置
cnmp run start

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。