广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >react项目引入scss的方法
  • 121
分享到

react项目引入scss的方法

2024-04-02 19:04:59 121人浏览 八月长安
摘要

首先下载依赖 yarn add sass-loader node-sass 然后在项目路径 node_modules/React-scripts/config/webpac

首先下载依赖


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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: react项目引入scss的方法

本文链接: https://www.lsjlt.com/news/124302.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react项目引入scss的方法
    首先下载依赖 yarn add sass-loader node-sass 然后在项目路径 node_modules/react-scripts/config/webpac...
    99+
    2022-11-12
  • 在vue项目中引入scss并使用scss样式详解
    目录前言一、scss是什么?(和sass的区别)二、如何在vue项目中引入scss1.安装sass的依赖包2.sass-loader依赖于node-sass,安装node-sass3...
    99+
    2022-11-13
  • react项目中引入图片的方法有哪些
    这篇文章主要介绍了react项目中引入图片的方法有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。img标签引入图片因为react其实是通过js的reader函数渲染的页面...
    99+
    2023-06-15
  • vue项目配置sass及引入外部scss文件方式
    目录配置sass及引入外部scss文件配置sass引入外部scss文件如果显示错误为如下图所示记住此时需要重启项目 npm run dev踩过的坑 Vue引入Sass文件问题来了,为...
    99+
    2022-11-13
  • react 项目中引入图片的几种方式
    img标签引入图片 因为react其实是通过js的reader函数渲染的页面,所以直接写src=“路径”是无法引入图片 我们可以像引入模块一样引入图片 import img ...
    99+
    2022-11-12
  • vue项目怎么配置sass及引入外部scss文件
    这篇文章主要介绍了vue项目怎么配置sass及引入外部scss文件的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue项目怎么配置sass及引入外部scss文件文章都会有所收获,下面我们一起来看看吧。配置sas...
    99+
    2023-06-30
  • Android项目中引入aar包的新方法
    一、已过期的方法: 1、把aar文件放在一个文件目录内,比如就放在工程的libs目录内; 2、在app的build.gradle文件添加如下内容:(该配置和dependencies配置是一个位置级别)      repositories {...
    99+
    2023-09-06
    android android studio gradle
  • Angular项目中引入第三方UI库的方法
    这篇文章给大家分享的是有关Angular项目中引入第三方UI库的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12.18....
    99+
    2023-06-15
  • react项目优化配置的方法
    本篇内容介绍了“react项目优化配置的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!优化-配置CDN通过 craco 来修改 webp...
    99+
    2023-07-02
  • VUE项目中引入JS文件的方法总结
    目录1.在index.html页面使用script标签引入2.在main.js中使用window.moduleName 使用3.手动添加export4. 使用import方式,把需要...
    99+
    2022-11-13
  • react项目引入antd框架方式及遇到的坑怎么解决
    这篇文章主要介绍了react项目引入antd框架方式及遇到的坑怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react项目引入antd框架方式及遇到的坑怎么解决文章都会有所收获,下面我们一起来看看吧。r...
    99+
    2023-07-05
  • Vite搭建React项目的方法步骤
    目录前言创建一个 Vite 项目改造工程目录约定其他配置前言 日常放鸽,火钳刘明 这是一个基于 vite 搭建的 React 的项目,开发体验非常棒。 创建一个 Vite 项目 ...
    99+
    2022-11-12
  • React项目配置prettier和eslint的方法
    目录配置prettier和eslint配置stylelint保存自动修复参考视频: https://www.bilibili.com/video/BV1rh411e7E5vd_sou...
    99+
    2022-11-13
  • Android项目中引入aar包的正确方法介绍
    目录一.Android项目中引入aar包的方法二.Android导入jar包补充:Android 引入aar包后,应用图标改变了总结一.Android项目中引入aar包的方法 我在使...
    99+
    2022-11-13
  • react如何引入外部方法
    本篇内容介绍了“react如何引入外部方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!react引入外部方法的方法:1、通过import引...
    99+
    2023-07-05
  • vue项目中引入js-base64方式
    目录vue引入js-base641.安装md5依赖2.在需要使用md5的组件中使用直接使用md5使用Base64编码解码1.下载包2.在你需要解码(编码)的文件中引用3.使用方法vu...
    99+
    2022-11-13
  • react前端项目打包优化的方法
    今天小编给大家分享一下react前端项目打包优化的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。分析通过控制台判断加载资...
    99+
    2023-06-05
  • vue项目中按需引入element-ui的正确实现方法
    目录vue中按需引入element-ui的正确方法elementui完整引入及按需引入项目开发完整引入按需引入总结vue中按需引入element-ui的正确方法 1. 创建vue项目...
    99+
    2023-01-10
    vue引入element-ui vue element-ui vue项目引入element-ui
  • SpringBoot开发项目,引入JPA找不到findOne方法的解决
    引入JPA找不到findOne方法 开发SpringBoot的DAO层之后,去测试的时候,发现findOne()这个方法找不到了,查看了对应的表字段名和实体类的属性都一致 找了半天...
    99+
    2022-11-12
  • React Native项目中使用Lottie动画的方法
    Lottie是Airbnb开源的一个面向iOS、Android、React Native的动画库,能加载Adobe After Effects导出的动画,并且能让原生App像使用静态...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作