How does create-react-app define global scss variables

recently created a project using create-react-app, and because of the variety of project themes, multiple style files are required for style definition.

The original idea of

is to define a css file, which is introduced where you need to use it through the distinction of naming (. Base_background:-sharpff0000;), but this method is too troublesome, and you need to add a class name (quite a lot of class names) in addition to the element"s own class name. And each component has to introduce theme style files, increasing redundancy.

then try to define scss, globally to control the theme style through variable syntax. See an article on vue that allows variable introduction through sass-resources-loader without the need for each component to introduce a scss file separately. vue introduces the sass global variable

after many attempts, it was not successfully implemented in react. Ask anyone who has done a similar operation and give me some advice. Thank you!

React.js webpack sass javascript

May.25,2021

I have the same problem as you. Have you solved it?

I know,
this is my project structure

npm i sass-resources-loader --save-dev
webpack.config.dev

./src**
App.jsscssscsscommon.scsscommon.scss
App.js

everything is all right,

https://blog.csdn.net/Beamon_.
test is valid

cnpm I sass-resources-loader-- save-dev

webpack.config.js 447

.concat ([{loader: "sass-resources-loader", options: {resources: path.join (_ _ dirname, ".. / src/assets/css/$ {name} .scss")}])

After

{
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader',
                {
                  loader: 'sass-resources-loader',
                  options: {
                    resources: '../src/assets/styles/namespace.scss',
                  },
                },
              ),
            },

create-react-app eject, this will not work

Previous: After axios sets the request header, POST becomes OPTIONS, error 405.

Next: The Wechat page on the mobile terminal is compatible with the function keys at the bottom of iOS.