使用 create-react-app 配置 react 开发环境,像下面这样,就可以构建一个新的 react 单页面应用,非常方便。
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
在安装完成之后
npm run eject (这一步操作是将webpack配置文件暴露出来 操作单向不可逆)
执行完上步操作之后会出现一个config的文件
以sass为例
配置sass需要按以下步骤进行:
一、安装sass-loader和node-sass依赖
npm install sass-loader node-sass --save-dev
二、打开react的webpack配置
config/webpack.config.dev.js
找到module下的rules,然后找到最后一个配置,修改成如下的样子
{
//1.在web pack.config.dev.js 的exclude中添加/\.scss$/
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/,/\.scss$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
{//2.在web pack.config.dev.js 中配置此项
test:/\.scss$/,
include:paths.appSrc,
loader:["style-loader","css-loader","sass-loader"],
},