脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react项目引入scss

react项目引入scss的方法

 更新时间：2021年04月22日 14:54:17   作者：范天缘  
这篇文章主要介绍了react项目引入scss的方法,本文给大家介绍了React pwa的配置方法，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

首先下载依赖

yarn add sass-loader node-sass

然后在项目路径

node_modules/react-scripts/config/webpack.config.js

打开文件
找到

在这里插入图片描述

加入红线内的代码

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

就可以使用scss了

知识点扩展：

React pwa的配置

在到webpack配置文件中添加插件

const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new WorkboxWebpackPlugin.GenerateSW({
            clientsClaim:true,
            skipWaiting:true
        })
    ],

到此这篇关于react项目引入scss的方法的文章就介绍到这了,更多相关react项目引入scss内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React组件的使用详细讲解

    React组件的使用详细讲解

    React组件分为函数组件与class组件；函数组件是无状态组件，class称为类组件；函数组件只有props，没有自己的私有数据和生命周期函数；class组件有自己私有数据(this.state)和生命周期函数
    2022-11-11
  • 为什么说form元素是React的未来

    为什么说form元素是React的未来

    这篇文章主要介绍了为什么说form元素是React的未来，本文会带你聊聊React围绕form的布局与发展，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • react antd实现动态增减表单

    react antd实现动态增减表单

    antd是react流行的ui框架库，本文主要介绍了react antd实现动态增减表单，分享给大家，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • React Antd中如何设置表单只输入数字

    React Antd中如何设置表单只输入数字

    这篇文章主要介绍了React Antd中如何设置表单只输入数字问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • ahooks useRequest源码精读解析

    ahooks useRequest源码精读解析

    这篇文章主要为大家介绍了ahooks useRequest的源码精读解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • react基础知识总结

    react基础知识总结

    这篇文章主要介绍了react常用的基础知识总结，帮助大家更好的理解和学习使用react框架，感兴趣的朋友可以了解下
    2021-04-04
  • React实现生成和导出Word文档的方法详解

    React实现生成和导出Word文档的方法详解

    React是一个流行的JavaScript库,用于构建现代前端应用程序,本文将深入探讨如何在React中生成和导出Word文档,感兴趣的小伙伴可以学习一下
    2023-09-09
  • React Native中TabBarIOS的简单使用方法示例

    React Native中TabBarIOS的简单使用方法示例

    最近在学习过程中遇到了很多问题,TabBarIOS的使用就是一个，所以下面这篇文章主要给大家介绍了关于React Native中TabBarIOS简单使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
    2017-10-10
  • React如何优雅的捕获异常

    React如何优雅的捕获异常

    捕获异常是来定位你错误代码的。本文主要介绍了 React如何捕获异常，你知道多少种方法，ErrorBoundary，ErrorBoundary-try-catch等等。本文就来详细的介绍一下
    2021-06-06
  • React中的Diff算法你了解吗

    React中的Diff算法你了解吗

    这篇文章主要为大家详细介绍了React的Diff算法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03

最新评论