親測可用，定義好后，不需要在每個頁面引入，直接使用變量即可

在eject后的webpack.config.js中做如下配置：

image.png

全局樣式的路徑一定要正確

{
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                "sass-loader"
              ).concat(
                {
                  loader: 'sass-resources-loader',
                  options: {
                      resources: [
                          // resolve方法第二個參數(shù)為scss配置文件地址，如果有多個，就進(jìn)行依次添加即可
                          path.resolve(__dirname, '../src/styles/main.scss')
                      ]
                  }
              }
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

使用

在styles文件夾中創(chuàng)建一個main.scss,這個文件就是上面配置的* path.resolve(__dirname, '../src/styles/main.scss')*，然后在任意的scss文件中就可以使用main.scss中定義的變量和樣式了，避免了在多個scss文件中引入相同的樣式文件

image.png