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!


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


I know,
this is my project structure
clipboard.png
npm i sass-resources-loader --save-dev
webpack.config.dev

clipboard.png

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

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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b313b7-2bd75.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b313b7-2bd75.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?