在 React 中使用全局 SASS 变量迁移到样式组件 [英] Migrating to Styled-Components with global SASS variables in React

问题描述

我正在尝试将 Styled-Components 慢慢引入到我现有的代码库中，该代码库严重依赖全局 SASS 变量(导入到 main.scss 中的部分).

I'm trying to slowly introduce Styled-Components into my existing codebase which relies heavily on global SASS variables (partials imported into a main.scss).

如何引用 SCSS 变量?以下不起作用:

How do I reference the SCSS variables? The following doesn't work:

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: $color-blue;
`;

export default Button;

我是否以错误的方式处理这个问题?

Am I approaching this from the wrong way?

推荐答案

变量在.scss或.sass中扮演着非常重要的角色，但功能无法扩展文件外.

Variables play a very important role in .scss or .sass, but the functionality cannot be extended outside the file.

相反，您必须创建一个单独的 .js 文件 (例如: variable.js) 并将所有变量定义为对象.

Instead, you have to create a separate .js file (For example: variable.js) and define all your variables as an object.

这篇关于在 React 中使用全局 SASS 变量迁移到样式组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！