时间戳

首页 > 解决方案 > React 将文件中的所有 scss 规则导入组件

javascript - React 将文件中的所有 scss 规则导入组件

问题描述

我正在尝试将整个 scss 文件添加到 React 组件中。

我尝试使用 styleName 道具但没有成功

import React from 'react'
import Calendar from 'calendar'

import { calendarStyles } from './calendar.scss'

const CalendarShift = () => <Calendar styleName={calendarStyles}/>

export default CalendarShift

想知道是否可以将calendar.scss中的所有 scss 规则“传播”到Calendar组件中

标签： javascriptreactjsimportsass

解决方案

您应该做的是导入文件，然后使用类名，就像您在反应组件中通常使用它们一样。

import React from 'react'
import Calendar from 'calendar'

import './calendar.scss'

const CalendarShift = () => <Calendar className="calendar"/>

export default CalendarShift

请注意，您需要一个 webpack 加载器scss才能与您的 react 应用程序一起工作。

如果您想在日历组件中使用所有样式（类名），您仍然可以在上面的文件中导入文件并使用Calendar.

另一种解决方案是使用 postcss sass 扩展将样式转换为对象，以便您可以在对象表示法中使用它们。看看这个https://github.com/postcss/postcss-scss

推荐阅读