Question

我的React应用程序结构如下：

-src
|-components
 |-Card.js
 |-Card.scss
 |-Navbar.js
 |-Navbar.scss
|-styles
 |-_mixins.scss
 |-_variables.scss
|-App.js
|-App.scss

我使用node-sass，因此对于component-x，我只需要import component-x.scss即可应用scss文件。但是我有_mixins.scss和_variables.scss，我需要在任何地方使用它们，但是我不能在每个import文件中scss都使用它们。如何在全球范围内导入这些文件，以便可以在任何需要的地方使用它们？

Answer 1

创建一个main.scss并全部导入！

您的文件有一个示例：

/********************************SASS MAIN***********************************/
//COMPONENTS
@import "components/card";
@import "components/navbar";

//STYLES
@import "styles/mixins";
@import "styles/variables";

然后在您的App.js中仅import 'main.scss'

有关在sass here中导入的更多信息

如何导入Scss文件并在React应用程序中全局使用它们？

1 个答案: