关于react脚手架如何引入sass

版权声明：请注明原处！ https://blog.csdn.net/qq_36245035/article/details/81942132

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就可以了