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

Question

I have my React application structures like this:

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

I use node-sass so for component-x I just need to import component-x.scss to apply the scss file. However I have the _mixins.scss and _variables.scss which I need to use on everywhere, I cannot import them in each scss file. How can I import these files globally so I could use them anywhere I want?

Answer 1

Create a main.scss and import all inside!

There is an example with your files:

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

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

Then in your App.js just import 'main.scss'

more info about import in sass here

Answer 2

you can use customize-cra with react-app-rewired and in you 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";`;
  })
);

and change your package.json scripts into

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