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的方法的文章就介绍到这了,更多相关react项目引入scss内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React为 Vue 引入容器组件和展示组件的教程详解

    如果你使用过 Redux 开发 React,你一定听过 容器组件(Smart/Container Components) 或 展示组件(Dumb/Presentational Components),这样划分有什么样的好处,我们能否能借鉴这种划分方式来编写 Vue 代码呢?这篇文章会演示为什么我们应该采取这种模式,以及如何在 Vue 中编写这两种组件. 为什么要使用容器组件? 假如我们要写一个组件来展示评论,在没听过容器组件之前,我们的代码一般都是这样写的: components/Comment

  • React中如何引入Angular组件详解

    前言 为了在我的编辑器中使用 Angular,我用 Angular 编写了一个重命名功能.而为了使用它,我得再次使用一次 customEvent ,而在这个微前端架构的系统中,其事件通讯机制已经相当的复杂.在这部分的代码进一步恶化之前,我得尝试有没有别的方式.于是,我想到了之前在其它组件中使用的 Web Components 技术,而 Angular 6 正好可以支持. 下面话不多说了,来一起看看详细的介绍吧 HTML 中引入 Web Components 我所需要做的事情也相当的简单,只需要将

  • 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 Wor

  • 详解Vue项目引入CreateJS的方法（亲测可用）

    1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS

  • vue cli4.0项目引入typescript的方法

    现有的项目是采用vue cli4.0脚手架生成的,现在想要引入typescript. 1.执行安装命令 npm install --save-dev typescript npm install --save-dev @vue/cli-plugin-typescript 2.根目录下新建 tsconfig.json { "compilerOptions": { "target": "esnext", "module": &qu

  • 如何在React项目中引入字体文件并使用详解

    如何在React项目中引入字体文件并使用详解

    目录 前言 下面讲下如何引入字体文件并使用 一.下载字体包 二.将字体文件放到项目里 三.使用新字体 总结 前言 在做React项目的时候,发现UI设计给出的设计稿里,某些文字所用的字体,系统默认不支持.比如设计需要的这个字体:EmerlandRegular,即使在css里将文字字体设置为他们,实际效果也显示不出来. <Typography style={{ fontSize:'22px', fontFamily:'EmerlandRegular', textAlign:'center', co

  • 优雅的在React项目中使用Redux的方法

    或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action |--src |-- store Redux目录 |-- actions.js |-- index.js |-- reducers.js |-

  • 记一次react前端项目打包优化的方法

    前文 之前一年多前接手的一个react项目,前段时间因为做业务中台项目,对公司现有的应用项目做中台化改造,这期间将项目部署到uat环境,测试期间,测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久,白屏时间超过30s,体验很差,生产不至于这么慢但也是白屏时间挺长的,所以减少白屏时间增加用户体验成为了当务之急.复制代码 分析 通过控制台判断加载资源时间还有资源大小 通过开发者工具可以看到白屏的主要原因在于bundle.js这个打包后的文件过大,达到3.6M加上uat环境带宽等问题的话,光

  • Vite搭建React项目的方法步骤

    Vite搭建React项目的方法步骤

    前言 日常放鸽,火钳刘明 这是一个基于 vite 搭建的 React 的项目,开发体验非常棒. 创建一个 Vite 项目 yarn create @vitejs/app 如上图,选择了 react-ts 预设模板,如果出现下图一样的工程 yarn // 安装依赖 yarn dev // 启动开发环境 打开浏览器输入http://localhost:3000/#/,如上图所示的话.那么恭喜你,你可以正常开发 React 项目了.完结撒花 如果不行的话,直接看 vite 官网,它比我写的详细 改造工

  • React项目如何使用Element的方法步骤

    React项目如何使用Element的方法步骤

    初次在react项目中使用element框架,碰到了一些很简单的问题,但是卡了很久才解决,写篇博客记录一下. 1.安装: 在项目目录下下载: npm i element-react --save npm install element-theme-default --save 注:element官网快速上手中有提到 2.全局引用 在项目跟录下的index.js中全局引入 3.在项目中引用你需要的element组件 可能会报错 解决方式:在项目中下载依赖npm install react-hot-

  • vue项目引入字体.ttf的方法

    1.下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例) 2.在src下新建common文件,文件夹中包含以下文件 3.打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; } 4.配置webpack.base.conf.js 文件 5.App.vue引入字体 6.可在body中设置字体

  • vue项目中使用scss的方法步骤

    一 概述 随着sass/less等css预处理器的出现,编写css变的越来越有乐趣.所以现在越来越多的人在项目中喜欢使用scss或者less.(我自己就是一个).由于最近在写一个vue项目.所以就把写项目期间每天的一些知识点写在博客里.所以最近的博客应该都会和vue有关.今天要和大家分享的就是如何在vue项目中引入scss(引入less也类似) 二 vue中引入scss 2.1 vue-loader 在讲如何在vue项目中使用scss之前,我们先来简单了解一个概念,那就是vue-loader.v

随机推荐