最新-使用create-react-app 生成项目怎么处理scss预处理器

用create-react-app创建项目默认是没有scss预处理器的，需要我们去配置，

在根目录下：cnpm install --save-dev node-sass sass-loader

 

安装完成后，进入node_modules->react-scripts->config->webpack.config.dev.js（开发环境用的js）和webpack.config.prod.js（生产环境用的js）

 

 

 

          {
            // Exclude `js` files to keep "css" loader working as it injects
            // it's runtime that would otherwise processed through "file" loader.
            // Also exclude `html` and `json` extensions so they get processed
            // by webpacks internal loaders.
            exclude: [/\.js$/, /\.html$/, /\.json$/,/\.scss$/], //  添加
            loader: require.resolve('file-loader'),
            options: {
              name: 'static/media/[name].[hash:8].[ext]',
            },
          },
          { //  添加进去
            test: /\.scss$/,
            loaders: ['style-loader', 'css-loader', 'sass-loader'],
          },
        ],
      },
      // ** STOP ** Are you adding a new loader?
      // Make sure to add the new loader(s) before the "file" loader./\.scss$/], //  添加
            loader: require.resolve('file-loader'),
            options: {
              name: 'static/media/[name].[hash:8].[ext]',
            },
          },
          { //  添加进去
            test: /\.scss$/,
            loaders: ['style-loader', 'css-loader', 'sass-loader'],
          },
        ],
      },
      // ** STOP ** Are you adding a new loader?
      // Make sure to add the new loader(s) before the "file" loader.

上面两个js都要改，完成后再在终端重新运行 

npm start

大功告成！！