1.下载依赖node-sass和sass-loader
npm install node-sass sass-loader --save-dev
//前提必须要有node
2.找到webpack.config.dev.js
文件位置:node_modules\react-scripts\config\webpack.config.dev.js
3.配置webpack.config.dev.js,找到rule下的oneOf在里面添加
//sass
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
4.配置webpack.config.dev.js,然后找到exclude添加
/\.scss$/
Adding a CSS Preprocessor (Sass, Less etc.)
//安装
npm install --save node-sass-chokidar
在package.json
添加 scripts
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
然后这样就可以用sass了,但是你需要监听你修改的文件并且启动服务的话,这需要俩个操作,这里开发者也考虑到了这个问题,然后就有了
//这个可以一次运行多个
npm install --save npm-run-all
在package.json里面修改
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
然后正常npm run start就可以了