如何导入scs文件并在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'

有关导入sass的更多信息，请点击此处

Answer 2

您可以将customize-cra与react-app-rewired一起使用，并且在您的config-overrides.js中

const { override, adjustStyleLoaders } = require("customize-cra");
const path = require("path");
module.exports = override(
adjustStyleLoaders((loader) => {
loader.use[1].options.additionalData = `@import "./src/assets/scss/_variables.scss";`;
})
);

并将您的package.json脚本更改为

"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},