如何导入scss文件并在React应用程序中全局使用它们？
在React应用程序中全局使用SCSS文件的步骤如下：
- 首先，确保你的React应用程序已经安装了node-sass模块，该模块可以帮助你处理SCSS文件。你可以使用以下命令安装node-sass模块：
npm install node-sass- 在React应用程序的src目录下创建一个名为
styles（可以任意取名）的文件夹，用于存放所有的SCSS文件。 - 在
styles文件夹中创建一个名为index.scss的文件，该文件用于导入和组织所有的SCSS文件。 - 在
index.scss文件中，使用@import指令导入其他的SCSS文件。例如，如果你有一个variables.scss文件用于定义样式变量，你可以在index.scss中这样导入它：
@import 'variables.scss';- 在React应用程序的根组件（通常是App.js或index.js）中引入刚刚创建的
index.scss文件。你可以使用以下语句导入：
import './styles/index.scss';- 现在，你可以在React组件中使用全局的SCSS样式了。在需要使用的组件中，直接使用定义在SCSS文件中的类名即可。
通过上述步骤，你就成功导入并在React应用程序中全局使用了SCSS文件。这样做的好处是可以更好地组织和复用样式，使得项目维护更加方便。
推荐的腾讯云相关产品：腾讯云云开发（云托管、云函数、云数据库、云存储等），产品介绍链接地址：https://cloud.tencent.com/product/tcb
相关·内容
在正常的响应组件中，如果您有scss，您可以将其他scss文件导入其中，并获得对scss变量(如$color-primary: blue)的访问。
使用样式组件的最佳方法是什么？假设我想使用的应用程序有一些主要变量:字体大小、字体系列、颜色等等。我希望能够将它们导入一个React组件中，并在该文件的样式组件中使用</em
浏览 0提问于2019-01-09得票数 1
回答已采纳
我的React应用程序结构如下： -src |-Card.js |-Navbar.js|-styles |-_variables.scss|-App.scss 我使用node-sass，所以对于component-x，我只需要使用import component-x.scss来
浏览 15提问于2020-07-18得票数 1
回答已采纳
我用create-react-app命令创建了一个React项目，它使用webpack。
为了使用SASS，我需要使用npm run eject命令弹出，并在加载器数组中手动添加SCSS加载程序。这是我第一次使用React，我使用的是每种共组件风格的方法，它包括在每个组件中导入一个.scss文件。我在~/my-project-folde
浏览 0提问于2017-04-24得票数 1
我在根文件夹中创建了一个全局scss变量文件。@import '../../../style_config/style_config' (全局变量文件)更多的是，我在一个很深的文件夹中工作，很难找到相对路径。
有没有办法使用绝对路径？还是
浏览 0提问于2019-05-11得票数 1
回答已采纳
1回答
react.js中的组件库
、、、、
我正在使用React.js和scss创建我自己的组件库，它可以跨多个react项目使用。我正在使用webpack来捆绑组件。我已经模块化了我的模块，以便专门导入单个组件。import Button from '@myModule/button';
当我把它们和webpack捆绑在一起时，我得到了css和js的分离。因此，在消费应用程序中，我必须全局导入
浏览 16提问于2020-07-30得票数 0
我的目标是让每个React组件使用自己的SCSS文件，其他组件的样式表无法访问该文件。但是需要一些全局文件，比如variables.scss，这正是问题所在。└── index.scss└── sass └── variables.scss
我使用带有节点-sass的包来导入这些S
浏览 0提问于2019-09-07得票数 14
我正在做一个项目，在那里我想使用scss和react。我使用3个全局样式文件，每个组件使用1个单独的scss文件，但它们似乎应用了我甚至没有导入的样式。
浏览 4提问于2021-09-09得票数 0
回答已采纳
跟随链接import _variables from '../scss/_variables.scss';
浏览 34提问于2019-08-02得票数 4
1回答
我在我的应用程序中使用了角(Jhipster)，我想在我的.scss文件中导入几个glocal.scss文件。因此，我创建了一个"util“文件夹(与global.scss文件相同的级别)，并在其中添加了这些.scss部分。在我的global.scss文件之上，我尝试去做：
@imp
浏览 0提问于2019-03-30得票数 0
回答已采纳
1回答
我有一个与js共享sass变量的问题，我正在为我的项目使用Reactjs，我想分享一些与断点相关的sass变量，以便构建响应组件。我看到我们可以在.scss文件上使用:export{}表达式共享变量，我在.sass文件上尝试了相同的表达式，但它不起作用。在.sass文件中是否有与:eport{}相同的语法？
谢谢
浏览 3提问于2019-05-02得票数 0
2回答
import React from "react";import React from 'react';我在这里遇到的导入Login.scss
浏览 0提问于2019-03-22得票数 0
问题
我如何在不导入每个文件和2的情况下全局导入variables.scss 1.通过引用而不是在构建中复制它们？当我将variables.scss导入到全局 index.scss中时，它怎么不是全局的？我可以通过导入组件中的变量文件来修复错误，但通过这样做，每次在vue组件中导入变量
浏览 3提问于2021-07-08得票数 2
我正在用引导我的应用程序，我想用类型记录和SASS来开发。我以前一直在使用角文件，我可以很容易地引用这样的SASS文件： selector: 'unit-root', providers: []在React中，我试图导入这样的SASS文件：
import s fro
浏览 2提问于2019-03-08得票数 19
回答已采纳
我想创建mixin函数并使用全局SCSS文件中的全局变量，而不需要为我正在使用的每个SCSS文件导入该文件。我知道我可以手动导入一个全局SCSS文件到每个SCSS文件，然后使用“全局”mixn，但我不希望开发人员每次创建新的SCSS
浏览 18提问于2019-09-02得票数 1
2回答
我正在尝试将整个scss文件添加到一个React组件中。import Calendar from 'calendar'
const CalendarShift = () => &
浏览 0提问于2019-08-09得票数 0
回答已采纳
6回答
当sass文件被导入时，我使用browserify来转换我的代码。
有谁能帮我整理一下如何使用和集成这个问题？
浏览 1提问于2018-09-19得票数 5
1回答
我使用的是aplha版本的create app -index.module.scss @import "./index.modul
浏览 0提问于2018-04-25得票数 1
回答已采纳
8回答
我刚刚开始学习React (拥有一些JavaScript知识，因为我也在学习它)并构建我的第一个项目。我想知道如何添加样式到我的第一个反应项目，使用CSS/SCSS，因为我有一些知识和理解从我的html，CSS/SCSS学习项目。
如何将SCSS添加到您的React项目中？
浏览 5提问于2021-05-02得票数 74
回答已采纳
在我意识到我的home.module.scss样式也被应用到我只导入navbar.module.scss的导航组件之前，一切看起来都很正常。我有一个样式为我的按钮在每个模块，看起来像这样… button {} 这两个模块都在顶部导入一个全局scss文件，如下所示.../styles/global.scss';
浏览 26提问于2021-08-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
