Step 1
1、npm install style-loader css-loader sass-loader sass --save-dev
2、编辑webpack.config.js
const path = require('path')
const publicPath='../build/'
const rootpath=path.resolve(__dirname,publicPath)
const HtmlWebpackPlugin= require('html-webpack-plugin')
module.exports={
entry:{
reactapp:'./index.js'
},
// output:{
// filename:'[name].js',
// path:rootpath,
// publicPath:publicPath
// },
devServer:{//webpackServer
hot:true,//开启热更新
host:'localhost',//主机名
port:8056,//端口号
open:true//编译完打开浏览器
},
mode:'development',
module:{
rules:[//webpack package rules
{
test:/\.(js)$/,//当webpack 打包用到的是JS文件时,就用babel-loader来编译
exclude:/node_modules/,//排除node_modules文件里的js
use:{
loader:'babel-loader'
}
},
{
test:/\.(css|scss)$/,//当webpack碰到的是.sass、.css文件,就用style-loader、cssloader来编译
exclude:/node_modules/,
use:['style-loader','css-loader',"sass-loader"]
}
]
},
resolve:{
modules:['node_modules'],
extensions:['.js','.json']
},
plugins:[
new HtmlWebpackPlugin({
filename:'index.html',
template:'./public/index.html',
inject:true
})
]
}
我们在webpack.config.js中添加了sass-loader
Step 2
在src folder中创建这几个文件:
Main.css
.color-red{
color: red;
}
Main.scss
.color-red{
span{
color: blue!important;
}
}
App.js
import React from 'react'
import ReactDom from 'react-dom'
import Main from './main'
const CreateApp=(Id)=>{
ReactDom.render(
<Main></Main>,
document.getElementById(Id)
)
}
export default CreateApp
Main.js
import React from 'react'
import '../css/Main.css'
import '../css/Main.scss'
const Main =()=>{
return (
<h1 className='color-red'>
reactapp(by css)
<br/>
<span>span-color(by sass)</span>
</h1>
)
}
export default Main
修改index.js代码,如下:
import CreateApp from "./src/js/App";
CreateApp('app')
Step 3
最后,npm run dev,预览效果