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

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 我需要在任何地方使用，我不能在每个 scss 文件中 import 它们。我怎样才能全局导入这些文件，以便我可以在任何地方使用它们？

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'

sasshere

中有关导入的更多信息

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

How to import scss files and use them globally in a React application?

sass

reactjs

node-sass