create-react-app React脚手架 引入 scss 配置

1. 配置sass需要按以下步骤进行:

 一、安装sass-loader和node-sass依赖

npm install sass-loader node-sass --save-dev

 

二、打开react的webpack配置

 

React提供的脚手架create-react-app创建的工程文件不像vue那种暴露出webpack来的配置，所以你要去依赖包

  node_modules中找到react-scripts ，然后在react-scripts中找到config中的config/webpack.config.dev.js 文件和 webpack.config.prod.js 文件

将module配置项的最后一项配置后面添加如下

两个文件都要加。

{
    test:/\.scss$/,
    loaders:['style-loader','css-loader','sass-loader']
}

看图片 

在 loader: require.resolve('file-loader')  前面加

 

哪用哪引入scss 即可

import  ' style.scss ( 导入你创建的 scss路径)'

配置好了，记得重新启动运行