在实际的React项目中，我们会遇到引入scss的需求，那么react中怎么引入scss呢？其实并不难，本文给大家分享一下react引入scss的方法，需要的朋友可以参考。

首先下载依赖

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”的方法介绍了，需要的朋友可以参考上面的方法，希望对大家有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue页面跳转并传参的常见方式分别是什么

  目录1、携带普通类型参数2、携带复杂类型参数vue页面跳转并传参的八种方式方法一方法二方法三方法四方法五方法六方法七方法八1、携带普通类型参数字符串、数字等。path：要跳转新页面的路由链接query：要携带的参数let pathInfo = this.$router.resolve({  path:/product_

• JS寄生式继承是什么意思，怎么样使用

  寄生式继承类似于寄生构造函数和工厂模式。创建一个实现继承的函数，以某种方式增强对象，然后返回对象。寄生式继承适合主要关注对象，而不关心类型和结构函数的场景。

• JS中的Map与WeakMap类型的用法是什么？

  这篇文章主要给大家分享JS中的Map与WeakMap类型的用法，文中示例代码介绍的非常详细，对大家学习Map与WeakMap类型的使用和创建等操作有一定的帮助，感兴趣的朋友可以参考，希望大家阅读完这篇文章能有所收获，下面我们一起来学习一下吧。

• JS怎样解决闭包漏洞问题，方法有哪些

  闭包在JavaScript高级程序设计(第3版)中是这样描述:闭包是指有权访问另一个函数作用域中的变量的函数,下面这篇文章主要给大家介绍了关于javascript解决闭包漏洞的一个问题的相关资料,需要的朋友可以参考下

• canvas交互怎样实现的拖拽、旋转、缩放效果

  目录正文拖拽旋转缩放小结正文到目前为止，我们已经能够对物体进行点选和框选的操作了，但是这还不够，因为并没有什么实际性的改变，并且画布看起来也有点呆板，所以这个章节的主要目的就是让画布中的物体活起来，其实就是增加一些常见的交互而已啦????，比如拖拽、旋转和缩放。这是这个系列最重要的章节之一，希望能够对你有所帮助。拖拽先来说说