如何使create-react-app创建的react项目支持sass

前言

create-react-app打包同样是用的webpack,所以使其支持sass其实是和我们自行初始化的项目一样的,只是webpack的配置文件所在目录不一样。所以只要找到配置文件所在的目录,然后按照一般webpack的配置方法配置就好。

下面是操作步骤

首先安装sass-loadernode-sass两个依赖。

yarn add sass-loader node-sass

然后修改node_module文件夹下react-scripts里面关于webpack的配置文件

具体文件路径为:
./node_module/react-scripts/config/webpack.config.dev.js
注意:这是开发时的配置文件,打包还需要再配置webpack.config.prod.js文件

具体修改内容就是在配置文件里面添加:

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

具体位置就是在css配置的下面

{
  test: /\.css$/,
....

以上就是使create-react-app支持sass最简单的配置方法了。

    原文作者:IamDLY
    原文地址: https://segmentfault.com/a/1190000013987785
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞